Question

以下是我用于将自定义单元组件添加到容器的代码。在这里，我手动添加组件，但在我的实际应用程序中，它只会在客户端的浏览器中了解需要添加多少组件。因此，有可能以某种方式动态添加这些组件，而不是像我一样手动添加它。

 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

您可以覆盖类中的initComponent函数并在那里动态构建items数组：

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

在下面的代码中动态添加项目

1 个答案: