关于动态创建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添加到容器中*/
这里其实主要看的就是这块注释，虽然简陋，但是这个问题昨天晚上让我一直头疼，索性不考虑，一觉醒来就有了灵感。
新生代企业网站管理系统2.0 GBK build 091011
下载
新生代企业网站管理系统是一款基于php+mysql+smarty的免费开源建站系统。整套系统的设计构造，完全考虑大中小企业类网站的功能要求，网站的后台功能强大，管理简捷，支持模板机制,配置中英文双语言版。通过新生代企业网站管理系统，企业建站者可以轻松构建一个企业网站，让企业用户可以更加便捷了解企业的相关信息与动态；方便快捷地发布企业信息、产品等；更可以十分方便的通过管理平台管理企业的站内新闻、产品
底下就是将创建的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) {
}
});
