PDA

View Full Version : create containers dynamically in extjs



venkateshwar
3 Feb 2013, 11:12 PM
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
4 Feb 2013, 8:23 AM
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;

}
});