随笔- 210 文章- 0 评论- 1680 阅读- 119万

初识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 + "');");
}