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

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