zoukankan      html  css  js  c++  java
  • 关于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上的项目描述

  • 相关阅读:
    博客园Js设置
    springboot练习笔记
    相关的其他文件
    设计模式之----代理模式
    JSP的四种范围
    io流读写及相关内容
    缓存
    gson解析json
    Android简单获得通讯录
    android服务之一 Service
  • 原文地址:https://www.cnblogs.com/youring2/p/2944654.html
Copyright © 2011-2022 走看看