在extjs中动态创建容器

时间:2013-02-04 07:06:51

标签: extjs extjs4 extjs4.1

作为学习extjs的一步,我正在尝试设计拥有81个街区的数独游戏。要创建81个块,我是否需要重复以下代码81次?或者有没有办法在单个父块中动态创建81个块?

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

我尝试将其添加到一个函数中并将其调用for 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'}
    }]
  });
});

1 个答案:

答案 0 :(得分:2)

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