第一：

來看一下最終的效果 第二： 來看一下使用方法： 第三：

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#

好，本文大概就是這樣，喜歡我的文章，請幫忙點推薦------------------->

轉載于:https://www.cnblogs.com/liulun/p/4286671.html

總結

以上是生活随笔為你收集整理的自己动手写UI库——引入ExtJs（布局）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。