CODEWITHSUNDEEP
extjs
user595234
user595234

Reputation: 6249

Extjs 4 checkbox table

In the Extjs 4, I want to create a table (4*4) in the Panel, each cell will generate a checkbox. the data will be retrieved from Ajax call . what is the easiest way to do it ?

Thanks

Upvotes: 0

Views: 520

Answers (1)

existdissolve
existdissolve

Reputation: 3114

It depends. If you're in the context of a form panel, you can use a CheckboxGroup which out-of-the-box has support for the columnar layout you're wanting. In this case, adding the checkboxes would simply be a matter of retrieving a reference to the CheckboxGroup, looping over the result in the Ajax response, and adding each checkbox. Since the CheckBox group already supports the columns config, you can let Ext JS worry about distributing the checkboxes to the correct columns as you add them.

Here's a live example: https://fiddle.sencha.com/#fiddle/ki

And the code:

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

Upvotes: 1

Related Questions