Ext js中CheckBoxGroup的动态绑定

    <script  type="text/jscript">
     var WinXianCode;
    function SearchGetXianLuF(Type)
    {
        if(!WinXianCode)
        {
            //创建窗体框
             WinXianCode=new Ext.Window({
           id:‘WinXianCode‘,
           width:700,
           height:600,
           closeAction:‘hide‘,
           autoScroll:true,
           model:true,
           items : [
                    new Ext.form.FormPanel({
                        frame:true,
                        defaultType:‘textfield‘,
                        id:‘c-form‘,
                        labelWidth :40,
                        defaults:{width:700},
                        })
                   ],
           title:‘报价项目包含不包含项‘
          });
        }
        QuotedPriceView(Type);
        //弹出窗体
        WinXianCode.show(‘XianLuCode‘);
    }
    </script>

    <script type="text/javascript">

    //报价数据加载
    function QuotedPriceView(Type)
    {
        var QuotedPriceCheckboxItems = [];
        Ext.MessageBox.wait(‘报价数据正在加载‘,‘请稍等...‘);
        Ext.Ajax.request({
            url:‘QuotedPrice.aspx‘,
            method : ‘post‘,
            success: function (r) {
                Ext.MessageBox.hide();
                var data = Ext.decode(r.responseText).QuotedPricelist;
                if(data.length>0)
                {
                    //获取报价:开始
                    for(var i=0;i<data.length;i++)
                    {
                      QuotedPriceCheckboxItems.push
                      ({
                           id:‘CheckBox‘+data[i].name,
                           name:data[i].name,
                           boxLabel: data[i].boxLabel,
                           inputValue:data[i].inputValue,
                           listeners:{
                              check:function(el,checked){
                                    var coninter=Ext.getCmp("QuotedPriceS");
                                    if(coninter!=undefined)
                                    {
                                        var inter=coninter.items;
                                        var xq=[];
                                        for (var i = 0; i < inter.length; i++)
                                        {
                                            if (inter!=null && inter.get(i).checked)
                                            {
                                                xq.push(inter.get(i).inputValue);
                                            }
                                        }
                                        if(Type==1)
                                        {
                                         //费用包含
                                         Ext.getCmp("ratedetail").setValue(xq.join(‘\n‘));

                                        }
                                        if(Type==2)
                                        {
                                          //费用不包含
                                         Ext.getCmp("ratedetailno").setValue(xq.join(‘\n‘));
                                        }
                                    }
                              }
                            }
                      });
                    }
                    //获取报价:结束

                   //定义多选的报价数组:开始
                   var checkGroup = new Ext.form.CheckboxGroup({
                        id:‘QuotedPriceS‘,
                        xtype:‘checkboxgroup‘,
                        fieldLabel:‘报价‘,
                        width:1200,
                        columns:1,
                        items:QuotedPriceCheckboxItems
                        });
                  //定义多选的报价数组:结束

                  //多选的容器:开始
                  var cbp = Ext.getCmp("c-form");
                  cbp.items.add(checkGroup);
                  cbp.show();
                  cbp.doLayout();
                  //多选的容器:结束
                }
            }
        });
    }
    </script>

后台返回的json数据:

JArray jar = new JArray();
        DataSet db_QuotedPrice = SPBll.Packages.getQuotedPrice();
        foreach (DataRow row in db_QuotedPrice.Tables[0].Rows)
        {
            jar.Add(new JObject(
                new JProperty("name", row["id"].ToString()),
                new JProperty("inputValue", row["cname"].ToString()),
                new JProperty("boxLabel", row["cname"].ToString())
                ));
        }
        Response.Write(new JObject(new JProperty("QuotedPricelist", jar)));
时间: 2024-07-30 10:03:34

Ext js中CheckBoxGroup的动态绑定的相关文章

Ext.js 中 25种类型的Ext.panel.Tool

通过Ext.panel.Panel的tools配置项来设置Ext.panel.Tool实例. 要注意的一点是,Ext框架提供的Ext.panel.Tool仅包含按钮图标而具体的点击事件处理函数需要我们自定义. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

利用多叉树实现Ext JS中的无限级树形菜单(一种构建多级有序树形结构JSON的方法)

一.问题研究的背景和意义 目前在Web应用程序开发领域,Ext JS框架已经逐渐被广泛使用,它是富客户端开发中出类拔萃的框架之一.在Ext的UI控件中,树形控件无疑是最为常用的控件之一,它用来实现树形结构的菜单.TreeNode用来实现静态的树形菜单,AsyncTreeNode用来实现动态的异步加载树形菜单,后者最为常用,它通过接收服务器端返回来的JSON格式的数据,动态生成树形菜单节点.动态生成树有两种思路:一种是一次性生成全部树节点,另一种是逐级加载树节点(利用AJAX,每次点击节点时查询下

Ext.js中自己扩展的EasyGrid

这里只写了一些核心的代码,具体如下: Ext.ux.EasyGrid = Ext.extend(Ext.grid.GridPanel, { initComponent: function () { this.autoHeight = true, this.viewConfig = { forceFit: true }; this.createStore(); //创建Store this.createColumns; //创建列模型 this.createTbar(); //创建GridPane

【翻译】在Ext JS和Sencha Touch中创建自定义布局

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析. 虽然是这样,但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最常

【翻译】了解Ext JS 5的小部件

原文:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件.同时,还在Ext JS 5引入了一种新的被称为"小部件"的轻量级组件.在Ext JS 5中,已包含了几个小部件,在本文将告诉你如何轻松的去打造自己的小部件. 为了说明其中的关键概念,在文中将创建一个简单的名为"ratings"的如下图所示的小部件: 入门 与常用的从Ext.Compon

谈谈Ext JS的组件——布局的使用方法

概述 在Ext JS中,包含两类布局:组件类布局和容器类布局.由于有些组件是有不同的组件组合而成的,如字段就由标题和输入框构成,他们之间也是存在布局关系的,而这就需要组件类布局来处理组件内自己特有的布局关系.如果我们不定义自己的组件,基本不需要使用到组件布局,知道就行了.本文主要介绍的是容器类布局,因为这个在开发中是必定会使用到的. 注意:在Ext JS中,字段有两层意思.在模型中所说的字段,与数据库中的字段的意义是一样.字段的第二层意思是指表单中的输入组件,这个大家要注意区分. 自动布局:Ex

谈谈Ext JS的组件——布局的使用方法续二

绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为输入控件的 高度基本是固定的,所以不需要设置.在可视化编程没有出现之前,开发界面算是个苦差事,因为布局是需要花费不少功夫的,例如想要在已经定义好的组件中插入 一个组件,那就得重新修改插入位置以下的组件的坐标,这工作是比较枯燥无聊的,因而,在没必要的情况下,还是少选择这种布局模式. 绝对布局是使用CS

【翻译】要理解Ext JS 5小工具

原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还在Ext JS 5引入了一种新的被称为"小部件"的轻量级组件. 在Ext JS 5中,已包括了几个小部件,在本文将告诉你怎样轻松的去打造自己的小部件. 为了说明当中的关键概念.在文中将创建一个简单的名为"ratings"的例如以下图所看到的的小部件: 入门 与经常使用的

【翻译】Ext JS 6有什么新东西?

工具包ToolKits 发布 包的命名 Fashion 图表 ItemEdit插件 网格 电子表格 可操作模式Actionable Mode和可访问性 LazyItems插件 屏幕阅读器支持可访问性 微加载Microloader Touch网格 原文:http://docs.sencha.com/extjs/6.0/whats_new/6.0.0/whats_new.html Ext JS在Sencha框架中引入了许多新的和令人兴奋的改进.这些变化为基于所有现代浏览器.设备和屏幕尺寸带来了新的功