初识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配置是很实用的。)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张泽旭的专栏

Netty5实现接收服务端返回数据

41820
来自专栏Java架构沉思录

Kafka中的时间轮算法

简单说说时间轮吧,它是一个高效的延时队列,或者说定时器。实际上现在网上对于时间轮算法的解释很多,定义也很全,这里引用一下朱小厮博客里出现的定义:

16820
来自专栏信安之路

一个 .net 病毒的分析过程

本次样本为 Lnk 文件,内嵌了一个 Powershell 脚本,用于后续的释放和攻击……

30120
来自专栏老付的网络博客

详解.net中IL语言

中间语言,又称(IL语言)。充当Clr与.net 平台的中间语言,比如用C#编写程序,编译器首先是把C#代码转译成IL语言,最终由Clr解释执行,下面我们学习下...

21220
来自专栏AI科技大本营的专栏

南开大学提出最新边缘检测与图像分割算法,精度刷新记录(附开源地址)

近日,南开大学媒体计算实验室提出的最新边缘检测和图像过分割(可用于生成超像素)被 IEEE PAMI 录用。研究的第一作者也发微博称:“这是第一个在最广泛使用的...

24710
来自专栏Spring相关

BootStrap-table的使用实现排序功能

78120
来自专栏依乐祝

.NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程

接下来我们就正式进入.NET Core实战项目之CMS的设计篇了。在设计篇呢,我们需要对数据库进行设计,而数据库的设计又分为功能部分设计以及用户权限部分设计。作...

16420
来自专栏wireboy编程加油站

用Vue.js搭建一个小说阅读网站

这是一个使用vue.js + mint-ui + .net core api的小说网站。

82500
来自专栏Java技术分享圈

这就是我不建议去外包公司开发的原因?

咱们每个人都是学了好久编程,做了好久的项目,目的也只是为了可以去一个不错的公司可以有一个不错前景的发展。

66030
来自专栏依乐祝

.NET Core实战项目之CMS 第八章 设计篇-内容管理极简设计全过程

上一篇文章中我带着大家进行了权限部分的极简设计,也仅仅是一个基本的权限设计。不过你完全可以基于这套权限系统设计你的更复杂的权限系统,当然更复杂的权限系统要根据你...

18720

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励