在开发过程中，往往需要利用数据动态生成Checkbox。如权限节点。考试答案，调查选项等等。在Extjs中，有两种方法来获取后台数据，一是Ext.Ajax()方法，第二种是利用 Store，store其实也是利用ajax方式来获取，下面以利用Store的方式来实现动态生成。
1、定义Store
//定义store
var customFieds = new Ext.data.Store({
url: ‘Controls/GetFields',
remoteSort: true,
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'total',
id: 'Id'
}, [
{ name: 'Id', type: 'string' },
{ name: 'Name', type: 'string' },
{name: 'FieldType', type: 'string'},
{name: 'IsChecked', type: 'string'}
])
});
2、生成
/**
* 生成Checkbox
*
*/
function generateCheckbox() { //以store动态生成Checkbox
var items = [];
for (var i = 0; i < customFieds.getCount(); i++) {
var d = customFieds.getAt(i);
var chk = { id: d.get('Id'), boxLabel: d.get('Name'), name: 'LableFields',inputValue:d.get('Id'),checked :d.get('IsChecked')=='true'?true:false };
items.push(chk);
}
var CheckBoxGroupTypes = new Ext.form.CheckboxGroup({
xtype: 'checkboxgroup',
fieldLabel: 'Field<span style="color: red;" >*</span>',
id: 'Field',
allowBlank: false,
name: 'LableFields',
columns: 3,
anchor: "95%",
msgTarget: "side"
});
CheckBoxGroupTypes.items = items;
var singleColumn1 = [
CheckBoxGroupTypes
];
var form = new Ext.FormPanel({
border: false,
waitMsgTarget: true,
labelWidth: 100,
frame: true,
fileUpload: true,
bodyStyle: 'padding:5px 5px 0',
labelAlign: 'right',
items: singleColumn1,
buttonAlign: 'center',
buttons: [new Ext.ux.SubmitBtn({
text: 'Submit.',
handler: function() {
if (form.getForm().isValid()) {
form.getForm().submit({
url: 'Control/SaveOrUpdate',
params: {
"Id": id
},
waitMsg: 'save...',
timeout: 2000 * 1000,
success: function (form, action) {
if (action.result.success) {
win.destroy();
FieldRuleStore.load({ params: {
start: 0,
limit: ALL_PAGESIZE_SETTING
}
});
}
},
failure: function (form, action) {
Ext.Msg.show(action.result.msg);
}
});
}
}
}), new Ext.ux.CancelBtn({
text: 'Exit',
handler: function() {
win.destroy();
}
})]
});
var win = new Ext.Window({
id: ‘id',
title: title,
iconCls: 'application_form',
width: 500,
resizable: false,
constrain: true,
autoHeight: true,
modal: true,
closeAction: 'close',
plain: true,
items: [form]
});
win.show();
}
3、回调生成，回调的原因是因为extjs store获取数据是使用ajax方式获取。回调就是要在获取数据成功后才动态生成。
customFieds.load({
params: {
Id:id
},
callback: function(r, option, sucess)
{ generateCheckbox(); }
});
4、效果图