Ext CheckboxGroup 动态数据源类的封装

 

方法1：扩展自己控件

My.UI.CheckboxGroup=Ext.extend(Ext.form.CheckboxGroup,{
    columns:3,
    dataUrl:'', //数据地址

    labelFiled:'label',
    valueFiled:'value',
    setValue:function(val){
        if(val.split){
            val=val.split(',');
        }
        this.reset();
        for(var i=0;i<val.length;i++){
            this.items.each(function(c){
                //debugger;

                if(c.inputValue==val[i]){
                    c.setValue(true);
                }
            });
        }
        
    },
    reset:function(){
        this.items.each(function(c){
            c.setValue(false);
        });
    },
    
    getValue:function(){
        var val=[];
        this.items.each(function(c){
            if(c.getValue()==true)
                val.push(c.inputValue);
        });
        return val.join(',');
    },
    onRender:function(ct, position){
       var items=[];
        if(!this.items){ //如果没有指定就从URL获取

            JetCom.Ajax.request({
                url:this.dataUrl,
                scope:this,
                sync:true, //同步请求，需要添加扩展插件 http://hi.baidu.com/kaka888/blog/item/4687ccea21333adbd439c953.html

                onSuccess:function(data){
                    for(var i=0;i<data.length;i++){
                        var d=data[i];
                        var chk = {boxLabel: d[this.labelFiled], name: this.name||'', inputValue: d[this.valueFiled]};
                        items.push(chk);
                    }
                }
            });
            this.items=items;
        }
        My.UI.CheckboxGroup.superclass.onRender.call(this, ct, position);
    }
});
Ext.reg('mycheckgroup',My.UI.CheckboxGroup);

调用

var cc=new My.UI.CheckboxGroup({
    fieldLabel: 'Auto Layout',
    name: 'cb-custwidth',
    dataUrl:'data.json'
});


var chk=new Ext.FormPanel({
    renderTo:'form',
    frame:true,
    items:[
        cc
        ]});
cc.setValue('2,4,5');

 

方法2：

 

var res = Ext.util.JSON.decode(response.responseText).data; //

                    var items=[];
                  for(var i=0;i <res.length;i++)
                  {
                        var d=res[i];
                        var chk = {boxLabel: d.boxLabel, name: d.name, inputValue: d.name};
                        items.push(chk);
                    }
                  //定义多选组

                  var CheckBoxGroupTypes = new Ext.form.CheckboxGroup(
                  {
                        xtype: 'checkboxgroup',
                        fieldLabel: '元素类型',
                        id:'ElementTypeID',
                        name :'ElementTypeID',
                        columns: 3,
                        anchor:"95%",
                        msgTarget:"side"
                  });
                CheckBoxGroupTypes.items = items;
                Forms.items.add(CheckBoxGroupTypes); //

                Forms.doLayout();
                }