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

image

Util类完成了将Describe属性写入客户端的功能,序列化和反序列化,还有向客户端输出一个Hidden标签的功能。

然后是一些JSON转化的类。

最后一个代码段是DescribableProperty的定义。

在项目中,JS文件的生成操作,要设置为“嵌入的资源”,然后添加到资源中:

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

以HtmlEditor为例,说一下控件开发的步骤:

image

这是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方法,这两个方法分别在初始化和释放的时候自动调用。

image

我在初始化方法里面创建了HtmlEditor控件。这个控件监听change事件,如果内容改变,则会调用raiseChange方法:

image

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上的项目描述

原文地址:https://www.cnblogs.com/youring2/p/2944654.html