在Extjs 4中,我想在Panel中创建一个表(4 * 4),每个单元格都会生成一个复选框。将从Ajax调用中检索数据。最简单的方法是什么?
由于
答案 0 :(得分:1)
这取决于。如果您位于表单面板的上下文中,则可以使用开箱即用的CheckboxGroup支持您想要的柱状布局。在这种情况下,添加复选框只需要检索对CheckboxGroup的引用,循环Ajax响应中的结果,并添加每个复选框。由于CheckBox组已经支持列配置,因此您可以让Ext JS担心在添加时将复选框分发到正确的列。
以下是一个实例:https://fiddle.sencha.com/#fiddle/ki
代码:
// pretend this is from ajax
var checkboxes = [
{ name: 'Color', value: 'Red'},
{ name: 'Color', value: 'Blue' },
{ name: 'Color', value: 'Green' },
{ name: 'Color', value: 'Yellow' }
];
// our simple form panel with a checkboxgroup
var panel = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Some Checkboxes',
border: true,
width: 500,
items: [{
xtype: 'checkboxgroup',
columns: 2
}]
});
// get the checkboxgroup
var checkboxgroup = panel.down('checkboxgroup');
// loop over result from AJAX and add checkboxes
for (var i = 0; i < checkboxes.length; i++) {
var item = checkboxes[i];
checkboxgroup.add({
xtype: 'checkboxfield',
boxLabel: item.value,
name: item.name
});
}