Ext CheckboxGroup 动态数据源类的封装

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');//设值


//这样重写setValue() getValue()更好
Ext.override(Ext.form.CheckboxGroup,{　　　
　　　 //在inputValue中找到定义的内容后，设置到items里的各个checkbox中　　　
　　　 setValue : function(value){　　
　　　　　　　 this.items.each(function(f){　　
　　　　　　　　　　　 if(value.indexOf(f.inputValue) != -1){　　
　　　　　　　　　　　　　　　 f.setValue(true);　　
　　　　　　　　　　　 }else{　　
　　　　　　　　　　　　　　　 f.setValue(false);　　
　　　　　　　　　　　 }　　
　　　　　　　 });　　
　　　 },　　
　　　 //以value1,value2的形式拼接group内的值　　
　　　 getValue : function(){　　
　　　　　　　 var re = "";　　
　　　　　　　 this.items.each(function(f){　　
　　　　　　　　　　　 if(f.getValue() == true){　　
　　　　　　　　　　　　　　　 re += f.inputValue + ",";　　
　　　　　　　　　　　 }　　
　　　　　　　 });　　
　　　　　　　 return re.substr(0,re.length - 1);　　
　　　 },　　
　　　 //在Field类中定义的getName方法不符合CheckBoxGroup中默认的定义，因此需要重写该方法使其可以被BasicForm找到　　
　　　 getName : function(){　　
　　　　　　　 return this.name;　　
　　　 }　　
});

评论

1 楼 yangguo 2011-08-05  

写的真好！