项目描述 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查看。