关于动态创建checkboxgroup 网上资料其实也不少，为什么要写此篇呢，是因为ext3里面还有一个坑，希望还能给看到这里的亲们提供一点力所能及的帮助吧。
extjs3.0 中的checkboxgroup默认不能动态添加item。虽然它继承了ext.form.field，但是却类似于容器。
checkboxgroup配置中的items处理生成一个对应的panel，该处理过程只有一次，所以很难对checkboxgroup进行动态添加。
var checkboxgrouptypes = new ext.form.checkboxgroup({
xtype:'checkboxgroup',
fieldlabel:'请选择对应电厂',
columns:9,
width: 600,
name:'plantgroup'
});
/*这里采用jquery的ajax请求，为解决同步异步问题
* 这里async 必须设置成false
* 否则页面加载时，无法将动态创建的checkboxgroup添加到容器中*/
$.ajax({
url : plantgroupurl,
method : 'post',
async : false,
cache : true,
success : function(response){
var res = response;
var reslen = res.length;
var items = [];
for(var i = 0;i<res.length;i++){
var data = res[i];
var chb = {boxlabel:data.briefname,name:data.code,inputvalue:data.code,checked:true};
items.push(chb);
}
checkboxgrouptypes.items = items;
checkboxgrouptypes.dolayout();
}
});
/*这里采用jquery的ajax请求，为解决同步异步问题
* 这里async 必须设置成false
* 否则页面加载时，无法将动态创建的checkboxgroup添加到容器中*/
这里其实主要看的就是这块注释，虽然简陋，但是这个问题昨天晚上让我一直头疼，索性不考虑，一觉醒来就有了灵感。
底下就是将创建的checkboxgroup添加到了panel里与网上的方式有所不同。
var searchform = new ext.formpanel({
region:'north',
frame:true,
title:'查询条件',
height:100,
bodystyle:'border:0px',
collapsiple : true,
animcollapse : false,
layout : 'fit',
items: [{
bodystyle:'border:0px',
layout:'column',
height:30,
border:false,
items:[
{
bodystyle:'border:1px',
layout:'form',
labelwidth:80,
width:'220',
border:false,
allowblank:false,
items:[endmonth]
},
checkboxgrouptypes,
{
width:60,
bodystyle:'border:0px',
layout: 'form',
border:false,
defaulttype: 'textfield',
items: [{
xtype: 'button',
text: '查询',
handler:function(){
if(checkselectcondition()){
//在点击查询后过段时间再让其再点击查询
this.disable();
var thisobject = this;
settimeout(function(){thisobject.enable();}, 5000);
search();
}
}
}]
},{
width:70,
bodystyle:'border:0px',
layout: 'form',
border:false,
defaulttype: 'textfield',
items: [{
xtype: 'button',
text: '重置',
handler:function(){
searchform.getform().reset();
}
}]
}
]
}]
});
附录：这是当时参考的网上的例子，不同点（1）ajax（2）添加到容器的方式
ext.ajax.request({
url: 'jsp/insurance/ins_liquidation/data/getpersoninstype.jsp',
params : {'employeeid':employeeid},
success: function(response, opts) {
var res = ext.util.json.decode(response.responsetext).root;
var reslen = res.length;
var items=[];
for(var i=0;i<res.length;i++)
{
var d=res[i];
var chk = {boxlabel: d.insname, name: d.instypesid, inputvalue:d.instypesid,checked:true};
items.push(chk);
}
//定义多选组
var checkboxgrouptypes = new ext.form.checkboxgroup(
{
xtype: 'checkboxgroup',
fieldlabel: '申请清算险种',
id:'instypecb',
name :'instypecb',
columns: reslen,
anchor:"95%",
msgtarget:"side",
width:400
});
checkboxgrouptypes.items = items;
var cbp = ext.getcmp('checkboxpanel');
cbp.add(checkboxgrouptypes);
cbp.dolayout();
},
failure: function(response, opts) {
}
});
以上就是关于动态创建checkboxgroup中的一个实例的详细内容。