title: create containers dynamically in extjs
body: <p>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?</p>
  
  <pre><code>//inside parent container
  {
      xtype: 'container',
      border: 1,
      height: 30,
      style: {borderColor:'#565656', borderStyle:'solid', borderWidth:'1px'}  
  }
  </code></pre>
  
  <p>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 <code>Sencha extjs 4.1.1a</code>.</p>
  
  <p>Here is my complete code:</p>
  
  <pre><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'}
      }]
    });
  });
  </code></pre>