關於ExtJSExtender

今天我將ExtJSExtender的源代碼發佈到了codeplex上面，項目的地址是https://extjsextender.codeplex.com/。

ExtJSExtender將ExtJS中的部分控制項進行了封裝，以asp.net控制項的伺服器控制項的形式提供，可以方便的在項目中使用。目前該項目已經完成了TreePanel、GridPanel、Button、DateField、NumberField和HtmlEditor的功能。

我寫這個項目的初衷是希望能夠幫助一些js比較差的朋友在項目中使用ExtJS豐富的界面功能。我很早就有這個想法。

在瀏覽器端，js是萬能的，有豐富的UI庫可以使用，這些UI的性能和用戶體驗都遠優於asp.net自帶的控制項。而在做WebForm開發的時候，這些js UI庫並不能直接被使用，不能夠很好的與伺服器端進行交互，學習這些UI庫也是要付出很大的時間代價，影響項目的整體進度。

現在有了ExtJSExtender，我們可以像使用asp.net控制項一樣在頁面中輕鬆的添加ExtJS的豐富UI效果。雖然這不是最優的途徑，但也不失為一種實現方式。如果你對這個項目感興趣，請在codeplex中加入這個項目，一起來為它添加更多的功能。

如何進行ExtJSExtender的控制項開發

ExtJSExtender其實是一種script控制項，繼承自ExtJSControlBase基類，該基類繼承自WebControl，並實現了介面IScriptControl。這樣就可以在UpdatePanel中使用我們的控制項了。

ExtJSControlBase類並沒有具體的功能，只是向頁面中輸出了一些公用的JS代碼，方便其它控制項JS的使用。

下麵說一下Util.cs

Util類完成了將Describe屬性寫入客戶端的功能，序列化和反序列化，還有向客戶端輸出一個Hidden標簽的功能。

然後是一些JSON轉化的類。

最後一個代碼段是DescribableProperty的定義。

在項目中，JS文件的生成操作，要設置為“嵌入的資源”，然後添加到資源中：

[assembly: WebResource("ExtJSExtender.Controls.HtmlEditor.HtmlEditorExtenderBehavior.js", "text/javascript")]

以HtmlEditor為例，說一下控制項開發的步驟：

這是HtmlEditor的源代碼，繼承自Base類，並實現了這些介面：

IPostBackEventHandler：用來處理PostBack事件

ICallbackEventHandler：用來處理CallBack事件

IPostBackDataHandler：用來處理PostBack的數據。我在代碼中實現了這個介面，但它並不會直接調用，不知道原因，還望高手指點。無奈之下只好在OnInit的時候調用一下來恢複數據。

INamingContainer：這個介面起到一個標記作用，用來生成一個唯一的控制項id，併在render的時候寫入html中。

ExtJSExtender HtmlEditor的JS文件：

Type.registerNamespace('ExtJSExtender.Controls');

ExtJSExtender.Controls.HtmlEditorExtenderBehavior = function (element) {
    ExtJSExtender.Controls.HtmlEditorExtenderBehavior.initializeBase(this, [element]);
}

先是定義JS的命名空間什麼的，按照微軟給定的格式，這沒什麼好說的。

然後在ExtJSExtender.Controls.HtmlEditorExtenderBehavior.prototype中定義這initialize和dispose方法，這兩個方法分別在初始化和釋放的時候自動調用。

我在初始化方法裡面創建了HtmlEditor控制項。這個控制項監聽change事件，如果內容改變，則會調用raiseChange方法：

raiseChange方法調用了控制項內容的保存方法，將控制項的值保存到客戶端隱藏域內，這個隱藏域在PostBack的時候會提交到伺服器，伺服器可以獲取這個值，完成數據在客戶端和伺服器端的持久化。

invoke方法用來觸發伺服器端是事件，在HtmlEditor中沒有用到。

在代碼中使用ExtJSExtender<請參照codeplex上的項目描述>

要在你的項目中使用ExtJSExtender，需要先添加ExtJSExtender的引用，然後在web.config的page->control下添加一個節點：

<add tagPrefix="ext" assembly="ExtJSExtender.Controls" namespace="ExtJSExtender.Controls"  />

然後，在頁面中添加ExtJS和Jquery的引用：

<link rel="stylesheet" type="text/css" href="/ExtJS/resources/css/ext-all-gray.css" />
<script type="text/javascript" src="/ExtJS/ext-all-debug.js"></script>
<script type="text/javascript" src="/ExtJS/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.8.3.js"></script>

因為項目依賴scriptmanager，所以還需要添加scriptmanager的引用

<asp:ScriptManager ID="scriptManager1" runat="server">
</asp:ScriptManager>