Adding items dynamically in below code

Question

Below is the code which i am using to add a custom cell component to a container. Here i am adding the component manually but in my real application it will only get to know at the client's browser how many components it needs to add. So is it possible to somehow add these components dynamically instead of adding it manually as i am doing.

 Ext.define('TableRow',{
        extend: 'Ext.container.Container',
        alias: 'widget.tablerow',
        width: '100%',
        layout: {
            type: 'table',
            columns: totalColumnsToDraw
        },
        items:[
            {xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype:    'cell'},{xtype: 'cell'},{xtype: 'cell'},
            {xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},
            {xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},
            {xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'},{xtype: 'cell'}
        ] 
        });

matt · Accepted Answer · 2014-01-07 12:39:14Z

1

You can override the initComponent function in your class and build the items array dynamically there:

Ext.define('TableRow',{
    extend: 'Ext.container.Container',
    alias: 'widget.tablerow',
    width: '100%',
    layout: {
        type: 'table',
        columns: totalColumnsToDraw
    },
    numberOfCells: 10, // default number of cells, can be set on instantiation
    initComponent: function() {
        this.items = [];

        for (var i = 0; i < this.numberOfCells; i++) {
            this.items.push({xtype: 'cell'});
        }

        this.callParent();
    }
});

// create component with 50 cells
Ext.create('TableRow', {
    numberOfCells: 50
});

answered Jan 7, 2014 at 12:39

matt

4,0572 gold badges27 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding items dynamically in below code

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related