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