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

Evan Trimboli · Accepted Answer · 2013-02-04 07:12:49Z

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 4, 2013 at 7:12

Evan Trimboli

30.1k6 gold badges49 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr_Green Over a year ago

Thank you.. this did the work. :) One small doubt, how to give position absolute and relative just like in css using extjs..?

Mr_Green Over a year ago

I got it.. just use style property :D

Collectives™ on Stack Overflow

create containers dynamically in extjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related