create containers dynamically in extjs

Question

As a step to learn extjs, I am trying to design Sudoku game which has 81 blocks in it. To create 81 blocks, should I need to repeat the below code 81 times? or is there any way to dynamically create 81 blocks inside a single parent block?

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

I tried making it in to a function and call it in for loop for 81 times but this failed with many console errors in chrome with no result. I am using Sencha extjs 4.1.1a.

Here is my complete code:

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

score 2 · Accepted Answer · answered Feb 04 '13 at 07:12

2

Items is just an array, so build the array dynamically:

var i = 0,
    items = [];

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

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

answered Feb 04 '13 at 07:12

Evan Trimboli

29,900
6
45
66

Thank you.. this did the work. :) One small doubt, how to give position absolute and relative just like in css using extjs..? – Mr_Green Feb 04 '13 at 07:16
I got it.. just use `style` property :D – Mr_Green Feb 04 '13 at 07:21

create containers dynamically in extjs

1 Answers1