项目描述 Project Description
该项目依赖于ExtJS 4.1.1a和MS AJAX Library,将ExtJS的控件封装成为asp.net控件,方便做WebForm的同学使用。
ExtJS的地址:http://www.sencha.com/products/extjs/
该项目作为学习项目,只挑选了使用量较大的TreePanel、GridPanel以及Button、DateField、NumberField和HtmlEditor。
本项目的部分源代码参照了 ExtJs Extender Controls,在这里对该作者表示感谢。
本项目是一个学习项目,仅限于学习交流之用。
作者QQ:2257136296 Blog:http://youring2.cnblogs.com
使用步骤:
在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:
<asp:ScriptManager ID="scriptManager1" runat="server"> </asp:ScriptManager>
完成上面的三项以后,就可以在页面中使用ExtJSExtender了。
控件的用法(Demo中包含了详细的用法,建议下载Demo查看):
Button控件用法:
<ext:Button ID="btnOK" runat="server" Text="确定" Visible="true" OnClick="btnOK_Click" DisableAfterClick="true" OnClientClick="btnOK_click" Message="确定要提交吗"> <TriggerPostBackEvents Click="true" /> </ext:Button>
TreePanel控件用法:
<ext:TreePanel runat="server" ID="tree1" Title="异步加载数据" DataUrl="/Common/GetTreeNodes.ashx" RootId="0" Width="300" Height="500"></ext:TreePanel>
GridPanel控件用法:
<ext:GridPanel runat="server" ID="gridPanel" DataUrl="/common/GetPageData.ashx" Width="600" Height="300" Pagination="true" ShowRowNumberColumn="true" KeyField="ID" ShowSelectionColumn="false" SelectionMode="Multi" EnableEdit="true" PageSize="3" AutoPostBack="true" OnLoadPageData="gridPanel_LoadPageData"> <Columns> <ext:GridColumn HeaderText="ID" DataField="ID" Flex="1"> <EditorConfig Type="textfield" AllowBlank="false" /> </ext:GridColumn> <ext:GridColumn HeaderText="Name" DataField="Name" Flex="1" Type="none"> <EditorConfig Type="textfield" AllowBlank="false" /> </ext:GridColumn> <ext:GridColumn HeaderText="操作" Type="actioncolumn" Width="40"> <ActionItems> <ext:GridColumnActionItem IconUrl="/icons/delete.png" Tooltip="删除" ActionName="delete" /> </ActionItems> </ext:GridColumn> </Columns> <TriggerPostBackEvents RowCommand="true" RowSelectChanged="false" LoadPageData="true" /> </ext:GridPanel>
NumberField控件用法:
<ext:NumberField runat="server" AllowDecimals="true" Width="300" Height="50" ID="number1" MinValue="-1" MaxValue="1" Value=".5" DecimalPrecision="3" />
DateField控件用法:
<ext:DateField runat="server" ID="df" Width="200" Enabled="true" Value="2012-1-1" OnChange="df_Change" AutoPostBack="true" AllowBlank="false">
HtmlEditor控件用法:
<ext:HtmlEditor runat="server" ID="htmlEditor" Width="580" Height="250" />
form :https://extjsextender.codeplex.com/
详细的代码请下载Demo查看。