extjs - 在 extjs 中动态创建容器

Question

作为学习 extjs 的一个步骤，我正在尝试设计包含 81 个块的数独游戏。要创建 81 个块，我是否需要将以下代码重复 81 次？或者有什么方法可以在单个父块内动态创建 81 个块？

//inside parent container
{
    xtype: 'container',
    border: 1,
    height: 30,
    style: {borderColor:'#565656', borderStyle:'solid', borderWidth:'1px'}  
}

我尝试将其放入一个函数并在 for 循环中调用它 81 次，但这失败了，chrome 中有许多控制台错误，没有结果。我正在使用Sencha extjs 4.1.1a.

这是我的完整代码：

Ext.onReady(function(){
  Ext.create('Ext.container.Container', {
    layout: {
        type: 'column'
    },
    width: 400,
    renderTo: Ext.getBody(),
    border: 1,
     height: 300,
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    defaults: {
        width: 50
    },
    items: [{
        xtype: 'container',
        border: 1,
        height: 30,
        style: {borderColor:'#565656', borderStyle:'solid', borderWidth:'1px'}
    }]
  });
});

Answer 1

Items 只是一个数组，所以动态构建数组：

var i = 0,
    items = [];

for (i = 0; i < 5; ++i) {
    items.push({
        html: 'Foo' + i
    });
}

new Ext.container.Container({
    renderTo: document.body,
    items: items
});