Ext中实现checkbox数据动态加载

解决步骤:
由于checkboxGroup在加载panel时无法同时加载后台数据,这就需要在panel加载完成后进行异步获取数据。
后台获取数据后向前台传递list集合json数据,这时需要对checkbox属性进行匹配
匹配完成后直接将内容加入到items中即可自动显示
必须要对formpanel重新渲染刷新
异步获取数据
Ext.Ajax.request({
url : $.WEB_ROOT + '/system/codelist/list.do',
async : true,
params : {
'code.codeParentID':'question_types'
},
callback: function(options,success,response){
if(success = true){
var items =[{boxLabel : '<font style="font-size:14px;">全选</font>',id:-1,
//加入全选按钮监听
listeners : {
'check' : function() {
var length = Ext.getCmp('statisticsQuestionType').items.getCount();
var b = Ext.getCmp('statisticsQuestionType').items.get(0).getValue();
var c = Ext.getCmp('statisticsQuestionType').items.get(1).boxLabel;
for(i=0;i<length;i++){
if(b== true){
Ext.getCmp('statisticsQuestionType').items.get(i).setValue(true);
} else {
Ext.getCmp('statisticsQuestionType').items.get(i).setValue(false); }
}
}
}
}];
//前台获取从后台传入的内容并进行对checkbox匹配对象
var res =Ext.util.JSON.decode(response.responseText).codeList;
var code,checkbox;
for(var i=0;i<res.length;i++){
code = res[i];
if(i==0){
checkbox ={boxLabel : '<font style="font-size:14px;">'+code.codeValue+'</font>',id : code.pos+1,inputValue : code.id,checked:true};
}else{
checkbox ={boxLabel : '<font style="font-size:14px;">'+code.codeValue+'</font>',id : code.pos+1,inputValue : code.id};
}
//将匹配完后的对象插入到数组中
items.push(checkbox);
}
//创建checkboxGroup
var checkboxGroup =new Ext.form.CheckboxGroup({
xtype:'checkboxgroup',
fieldLabel:'<span style="color:red">*</span><font style="font-size:14px;">问题类型</font>',
id:'statisticsQuestionType',
name:'statisticsQuestionType',
// masTarget:'side',
vertical : true,
autoWidth : true,
allowBlank : false,
});

//将数组加入到checkboxGroup的items 中
checkboxGroup.items=items;
var p = new Ext.Panel({
bodyBorder : false,
border : false,
hideBorders : true,
columnWidth : 0.7,
layout : 'form',
labelAlign : 'right',
labelPad : 5,
labelWidth : 100,
padding : 5,
labelSeparator : ':',
items : [checkboxGroup]
});
formPanel.findById('allPanel').items.insert(3,p); //将panel插入到指定formpanel位置
formPanel.doLayout(); //刷新formPanel
}
}
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值