Ext 中关于xtype:checkboxgroup 显示以及提交解决办法？

1.老规矩 首先看下效果图

 

2.Ext中关于 如何实现复选框，也就是html中的checkbox，在Ext中需要使用xtype:checkboxgroup组件

看一下核心代码，关键就是就是items中复选框的内容   添加了以上内容，当勾选多个复选框的时候，后台接受的内容是inputValue的值，参数为name对应的字段，这点需要注意！接下来我们看一下后台接受到的参数"releaseSite":["02","03"]这样的，我这里是直接放到存储起来的.

{
        xtype:'checkboxgroup',
        beforeLabelTextTpl: [
            '<span style="color:red;font-weight:bold" data-qtip="必填选项">*</span>'
        ],
        fieldLabel: '发布位置',
        items: [
            { boxLabel: '平台系统 ', name: 'releaseSite', inputValue: '01' },
            { boxLabel: '农户端', name: 'releaseSite', inputValue: '02' },
            { boxLabel: '业务员端', name: 'releaseSite', inputValue: '03' },
        ]
    }

3.知道了如何提交复选框的参数，接下来就是在修改以及查看的时候把参数处理 转换一下即可，下面的思路是这样的，获取后台的参数01,02,03 类似这样形式的.首先如果为空则 不进行处理赋值，如果不为空，则利用String字符串中的split将字符串拆分为字符串数组，获取对应的复选框位置，通过循环判断字符串数组中的内容与复选框的值进行比较，如果相等，则设置复选框 勾选，下面来看一下显示代码！

 

 

   onAnnouncement: function(view, rowIndex, colIndex, item, e, record, row) {
        var releaseSite = record.get('releaseSite');        //获取grid中数据源record记录勾选的信息的信息
        if(releaseSite != null) {//判断存入数据是否为空，如果不为空则进行处理，反之，则不进行处理.
            var site = releaseSite.split(',');//拆分为字符串数据
            console.log(site); //将x,x,x拆分为字符串数组
            var items = form.down('checkboxgroup').items;//获取复选框勾选组件
            form.down('checkboxgroup').reset(); //重置该box
            //循环比较box值与后台获取的值是否匹配,匹配则勾选box
            for(var i = 0; i < site.length; i++) {
                items.each(function(items) {
                    if(items.inputValue == site[i]) {//如果组件中的inputValue对应的值 与字符串数组匹配，则设置勾选该组件
                        items.setValue(true);//设置勾选
                    }
                });
            }
        }}

4.总结 首先需要通过html中的checkbox需要找到对应Ext可以使用的类似的组件checkboxgroup组件，其次是需要将勾选的数据处理转换与前台默认的数据进行比较，如果匹配则勾选，本来这里想用for循环的，但是发现js中也存在着类似java中foreach增强型循环的东西，既然可以直接拿过来用，那就用呗.

 

5.关于jquery中each的使用，这里介绍一下，以免自己忘了

 上面each的通用写法items.each(function(index){console.log("索引的位置"+i)});