extjs - Extjs 4 チェックボックス テーブル

Question

Extjs 4 では、パネルにテーブル (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
    });
}