关于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>

更多的内容请参照codeplex上的项目描述