初识Ext.NET-阿里云开发者社区

以前从没想过会用到ExtJS，总是对它有着一种反感：认为脚本资源大，执行脚本多，性能差等等。最近因为一个项目使用到了，就用上了。相对JQuery，ExtJS没有那么方便灵活，但是其界面美观，功能实用，可以节约不少开发时间。玩ExtJS，就感觉是在玩配置，也许Java程序员会习惯些。熟悉那些配置无疑也是一件麻烦而且棘手的事情，稍不留心，就得为自己的失误埋单。虽然网上有些设计器，但是大都满足不了需求。后来，在网上找到一款还不错的框架——Ext.NET。这对于.NET开发人员来说，能节省不少时间。至少带智能提示的xml配置怎么也要比写js要顺手方便多了。而且其还是免费开源的。不过在使用过程中，也没有那么顺畅。

1）TextField的LabelStyle属性无效。这个据老外说，貌似是ExtJS的Bug，因为Ext.NET会根据你的设置生成标准的ExtJS配置。不过，人总不能在一棵树上吊死吧。我的解决方案是：

   function setLabelClass() {

        $(".x-form-item-label").addClass("labelStyle");

    }

如果监控ExtJS生成的html，就会发现，表单字段都会用到这个样式。所以我就在这个样式的基础上给它添加上我自己的样式。不过这个函数要放到Ext.onReady里面执行。

2）FieldSet等容器控件不触发验证（除了FormPanel）。这个老外说了是低版本的ExtJS的问题，于是下载了Ext.NET的整个源码，查看js，发现其目前打包的资源是3.3.0版本。也许就是后面少了个1吧。没心思改源码，就换招，全用FormPanel布局，搞半天，总算布局还令人满意了。FormPanel里面嵌套FormPanel，把子FormPanel的Layout设置为Column就好布局了。或者也可以考虑使用TableLayout，布局起来也挺方便的。

3）动态向CheckboxGroup和RadioGroup添加子项时，无法获取到值的问题。这个还是ExtJS的Bug。也许其只支持用SetValues的形式添加吧。而我在Ext.NET里面是动态添加CheckBox（在Page_Load事件中添加），查看源码，根据生成的js配置，是在checkboxGroup的items属性里面"new Ext.form.Checkbox"的。把代码发到Ext.NET论坛，发现老外们也没辙。于是自己测试，发现在JS中使用‘<%=FormPanel1.ClientID %>.getForm().getValues(true)’也没法获取到CheckboxGroup和RadioGroup选择的值，由此想到应该是ExtJS的问题，因此Page_Load事件中，可能应该调用SetValue来动态绑定值了。可是SetValue没有三个参数（文本、值、是否选择）的重载，达不到我的要求。于是想到了下面这招：

    Ext.onReady(function () {

        setGroupValues(<%=cblBusinessDistrict.ClientID %>,<%=cblBusinessDistrictHidden.ClientID %>);

        setGroupValues(<%=cblCompeteShops.ClientID %>,<%=cblCompeteShopsHidden.ClientID %>);

        setGroupValues(<%=cblHardwares.ClientID %>,<%=cblHardwaresHidden.ClientID %>);

        setGroupValues(<%=rblDetectorState.ClientID %>,<%=rblDetectorStateHidden.ClientID %>);

    });

    function setGroupValues(cblID,cblHidden) {

         var cbos = $('#'+cblID.id+' input[type=checkbox],input[type=radio]');

         cbos.change(function () {

            var items=cblID.getValue();

            if (items!=null && items.length==undefined) {

                cblHidden.setValue(items.tag);

                return;

            }

            var strValue='';

            if (items!=null) {

                for (var i = 0; i < items.length; i++) {

                      strValue+=items[i].tag+";";

                }

            }

            cblHidden.setValue(strValue);

        });

    }

这样一来，就能在复选框组和单选框组的选择事件中，将选择的值保存在隐藏域里面，这样就可以在后台获取到值了。不过值得注意的是，在给ExtJS表单控件赋值时，不要使用属性（text、value）赋值，这样只会将值写入到html控件里面，而ExtJS提交数据时不会提交，而应该采用其setValue方法。这招固然能解决问题，但是我心里总是觉得有原因的，可是没时间耗着。好在随着测试，终于找出了问题所在。即FormPanel控件不推荐使用Content元素布局，如果使用Items布局就不存在该问题了。如下面的测试：

<ext:ResourceManager ID="ResourceManager1" runat="server">

</ext:ResourceManager>

<ext:FormPanel ID="FormPanel1" Collapsible="true" Icon="PageAdd" runat="server" Title="Test"

    MonitorValid="true" Padding="5" ButtonAlign="Right" Width="830px" Layout="Form">

    <Items>

        <ext:FormPanel ID="fpnlShopInfo" Icon="PhoneAdd" Border="true" Collapsible="true"

            runat="server" Title="Test1" AutoHeight="true" LabelWidth="120">

            <Items>

                <ext:FormPanel runat="server" PaddingSummary="0" Border="false" ID="FormPanel16"

                    Layout="Column">

                    <Items>

                        <ext:CheckboxGroup ID="cblBusinessDistrict" runat="server">

                        </ext:CheckboxGroup>

                    </Items>

                </ext:FormPanel>

            </Items>

        </ext:FormPanel>

        <ext:FormPanel ID="FormPanel2" Icon="PhoneEdit" Border="true" Collapsible="true"

            runat="server" Title="Test2" AutoHeight="true" LabelWidth="120">

            <Content>

                <ext:FormPanel runat="server" PaddingSummary="0" Border="false" ID="FormPanel3" Layout="Column">

                    <Items>

                        <ext:CheckboxGroup ID="cboTest2" runat="server">

                        </ext:CheckboxGroup>

                    </Items>

                </ext:FormPanel>

            </Content>

        </ext:FormPanel>

    </Items>

    <Buttons>

        <ext:Button ID="Button1" runat="server" Icon="Disk" Text="Test1">

            <DirectEvents>

                <Click OnEvent="Save_Click">

                </Click>

            </DirectEvents>

        </ext:Button>

        <ext:Button ID="Button2" runat="server" Icon="Disk" Text="Test2">

            <DirectEvents>

                <Click OnEvent="Test2_Click">

                </Click>

            </DirectEvents>

        </ext:Button>

    </Buttons>

</ext:FormPanel>

      后台代码：

protected void Page_Load(object sender, EventArgs e)
{
    cblBusinessDistrict.ColumnsNumber = cboTest2.ColumnsNumber = 5;
    for (int i = 0; i < 10; i++)
    {
        Ext.Net.Checkbox cbo = new Ext.Net.Checkbox();
        cbo.BoxLabel = i + "Text";
        cbo.Tag = i.ToString();
        cbo.InputValue = i + "Value";
        cblBusinessDistrict.Items.Add(cbo);
        Ext.Net.Checkbox cbo1 = new Ext.Net.Checkbox();
        cbo1.BoxLabel = i + "Text";
        cbo1.Tag = i.ToString();
        cbo1.InputValue = i + "Value";
        cboTest2.Items.Add(cbo1);
    }
}
 
protected void Save_Click(object sender, DirectEventArgs e)
{
    string _str = string.Empty;
    foreach (var item in cblBusinessDistrict.Items)
    {
        _str += item.BoxLabel + ":" + item.InputValue + ":" + item.Checked + "\\n";
    }
    ResourceManager1.AddScript("alert('" + _str + "');");
}
 
protected void Test2_Click(object sender, DirectEventArgs e)
{
    string _str = string.Empty;
    foreach (var item in cboTest2.Items)
    {
        _str += item.BoxLabel + ":" + item.InputValue + ":" + item.Checked + "\\n";
    }
    ResourceManager1.AddScript("alert('" + _str + "');");
}

总体觉得ExtJS还算不错的，相对来说，Ext.NET也相当不错，而且是开源的。下面是本人学习ExtJS时，感觉有用的网站：
http://dev.sencha.com/deploy/dev/examples/（ExtJS示例）

http://dev.sencha.com/deploy/dev/docs/（ExtJS API）

http://www.ext.net（Ext.NET）

http://examples.ext.net/（Ext.NET示例）

http://james.newtonking.com/projects/json-net.aspx（JSON.NET）

http://www.jsonlint.com/（JSON格式验证，感觉方便将JSON格式化，这对于查看或检查JSON数据、ExtJS配置是很实用的。）