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