extjs - Extjs 4 复选框表

Question

在Extjs 4中，我想在Panel中创建一个表格（4*4），每个单元格都会生成一个复选框。数据将从 Ajax 调用中检索。最简单的方法是什么？

谢谢

Answer 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
    });
}