时间:2021-07-01 10:21:17 帮助过:2人阅读
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中的一个实例的详细内容,更多请关注Gxl网其它相关文章!