第一：
來看一下最終的效果
第二：
來看一下使用方法：
第三：
|
Component類代碼如下所示：
|
|
public class Component
{
public Component()
{
}
private string id;
public string Id
{
get
{
return id;
}
internal set
{
id = value;
}
}
private string region;
public string Region
{
get
{
return region;
}
set
{
var str = string.Format("Ext.getCmp('{0}').setRegion('{1}'); ", this.Id, value);
RenderContext.ExecScript(str);
region = value;
}
}
private int width;
public int Width
{
get
{
return width;
}
set
{
var str = string.Format("Ext.getCmp('{0}').setWidth({1}); ", this.Id, value);
RenderContext.ExecScript(str);
width = value;
}
}
private int height;
public int Height
{
get
{
return height;
}
set
{
var str = string.Format("Ext.getCmp('{0}').setHeight({1}); ", this.Id, value);
RenderContext.ExecScript(str);
height = value;
}
}
}
|
|
第一：
這是ExtJs里的一個基類，Ext里所有的界面元素都繼承自這個基類
第二：
Id，Width，Region，Height都是這個基類的屬性，在ExtJs中
Component類也包含這些屬性，當然還有很多其他的屬性，這里我們就沒有一一例舉了。
第三：
設置
Width，Region，Height這三個屬性的時候我們都讓瀏覽器執行了一段腳本，這段腳本讓ExtJs設置控件的相應屬性
|
|
Panel類的代碼
|
|
|
第一：
我們再這個控件類的構造函數里執行了JS代碼，並通過JS代碼創建了這個控件
第二：
創建完控件之后，就馬上獲取了這個控件的ID，這個ID是EXTJS自動生成的ID，與頁面上的其他控件是不會重復的
第三：
控件在界面上的ID獲取到之后，我們就賦給這個控件的基類的屬性
|
第五：
|
Viewport類的代碼
|
|
|
第一：
這個類的代碼的執行邏輯和panel代碼類的邏輯相似
第二：
這個類和Panel類都繼承自Container類
|
|
Container類的代碼
|
|
|
第一：
與Extjs相同Container類繼承自Compent類，也就是我們前面提到的控件的基類
第二：
我們再這個類中添加了Add方法，在這個方法里也是執行了一段JS函數，把一個控件添加到另一個控件中
|
第七：
|
工程的目錄結構：
|
|
|
第一：
名稱空間我們都加了NS后綴，這是為了使用方便
|
|
ExecScript方法的代碼：
|
|
|
第一：
這里的代碼和我們前面文章講到的不一樣，我這里改正用這種方式執行JS代碼了，只有這種方式，才能順利的得到JS的返回值
第二：
C#代碼讓瀏覽器執行了一個Exec的JS函數
|
|
Exec的JS方法的代碼
|
|
|
第一：
傳入參數就是我們想要執行的JS語句
第二：
用eval的方法執行這個JS語句，然后把返回值還給C#
|
好，本文大概就是這樣，喜歡我的文章，請幫忙點推薦------------------->