create containers dynamically in extjs

[venkateshwar]

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,
id: '21',
height: 30,
style: {borderColor:'#565656', borderStyle:'solid', borderWidth:'1px'}
}]
});
});

[sword-it]

Hi
Try following 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:this.getItems() 
});
getItems:function(){
  var items=[];
 for(var i=0;i<81;i++){
   items.push(
   {
     xtype: 'container',
     border: 1,
     height: 30,
    style: {borderColor:'#565656', borderStyle:'solid', borderWidth:'1px'} 
  }      
)
}
  return items;

}
});