Extjs之实现CheckboxGroup支持字符串分隔格式的数据

鉴于项目中的表单有不少的多选项组件checkboxgroup的使用，Extjs此控件默认的数据是对象类型｛｝，实际中却是逗号分隔格式的字符串。

因此专门对此做了实现。

Ext.define('Ext.ux.overrides.form.CheckboxGroup',{
    override: 'Ext.form.CheckboxGroup',
    separatedChar:',',
    getValue: function() {
        var values = {},arrValues=[],
                boxes  = this.getBoxes(),
                b,
                bLen   = boxes.length,
                box, name, inputValue, bucket;

        for (b = 0; b < bLen; b++) {
            box        = boxes[b];
            name       = box.getName();
            inputValue = box.inputValue;

            if (box.getValue()) {
                if (values.hasOwnProperty(name)) {
                    bucket = values[name];
                    if (!Ext.isArray(bucket)) {
                        bucket = values[name] = [bucket];
                    }
                    bucket.push(inputValue);
                } else {
                    values[name] = inputValue;
                }
                arrValues.push(inputValue);
            }
        }
        return arrValues.join(this.separatedChar);
    },
    setValue: function(value) {
        var me    = this,
                boxes = me.getBoxes(),
                b,
                bLen  = boxes.length,
                box, name,
                cbValue;

        me.batchChanges(function() {
            Ext.suspendLayouts();
            for (b = 0; b < bLen; b++) {
                box = boxes[b];
                name = box.getName();
                cbValue = false;
                if(value){
                    var arrValues=value.split(me.separatedChar);
                    if (Ext.isArray(arrValues)) {
                        cbValue = Ext.Array.contains(arrValues, box.inputValue);
                    } else {
                        cbValue = false;
                    }
                }
                box.setValue(cbValue);
            }
            Ext.resumeLayouts(true);
        });
        return me;
    }
});
Ext.onReady(function(){
    var checkGroup=Ext.widget('checkboxgroup',{
        fieldLabel: '多选项',
        columns: 2,
        vertical: true,
        allowBlank:false,
        name:'rb',
        separatedChar:'.',//数据分隔符可自定义，默认是英文逗号
        value:"1.2.3.4.5",
        items: [
            { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
            { boxLabel: 'Item 2', name: 'rb', inputValue: '2'},
            { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
            { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
            { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
        ]
    });
    var form1=Ext.create('Ext.form.Panel',{
        layout:'anchor',bodyPadding:10,
        defaults:{labelAlign:'right',labelWidth:60},
        items:[
            {
                xtype:'textfield',
                fieldLabel:'文本框',
                allowBlank:false,
                anchor:'100%',
                name:'text'
            },
            checkGroup
        ],
        listeners:{
            afterrender:function(v){
                v.loadRecord(new Ext.data.Model({text:'ddd',rb:"1.3.6"}));
            }
        },
        buttons:[
            {text:'ok',disabled:true,formBind:true},
            {text:'test',handler:function(btn){

            }}
        ]
    });
    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
            form1
        ]
    });
});
备注：在Extjs5.1下测试通过，谢谢。