Ext CheckboxGroup 动态数据源类的封装

最新推荐文章于 2022-05-10 10:59:47 发布

最新推荐文章于 2022-05-10 10:59:47 发布 · 159 阅读

文章标签：

#EXT #UI #C++ #C #C#

ExtJs 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用ExtJS框架自定义CheckboxGroup组件，包括从远程URL加载数据、设置及获取值的方法重写等。提供了具体实现代码示例。

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;　　
　　　 }　　
});