title: add items to panel and columns to grid dynamically
body: <p>I am using ExtJs 4.1 and trying to add items to panel and columns to grid dynamically.</p>
  
  <p>My Requirement</p>
  
  <p>MainPanel <code>(Ext.panel.Panel)</code> has 2 child items:</p>
  
  <ul>
  <li><p>DynamicPanel <code>(Ext.panel.Panel)</code></p>
  
  <ol>
  <li>I want to add this panel to the main panel dynamically.</li>
  <li>Then... I want to add items to DynamicPanel dynamically, the items  are a config  of the <strong>MainPanel</strong> called : "elements"</li>
  </ol></li>
  <li><p>DynamicGrid <code>(Ext.grid.Panel)</code>   </p>
  
  <ol>
  <li>I want to again, add this to the main panel dynamically. </li>
  <li>I want to add columns to DynamicGrid dynamically, and again these columns are part of the <strong>MainPanel</strong> config gridcolumns.</li>
  </ol></li>
  </ul>
  
  <p>I am getting the below error:  </p>
  
  <blockquote>
    <p>this.dpanel is undefined<br>
    [Break On This Error] this.dpanel.add(this.elements) </p>
  </blockquote>
  
  <p>My code is as below:</p>
  
  <pre><code>Ext.create('Ext.data.Store', {
      storeId: 'simpsonsStore',
      fields: ['name', 'email', 'phone', 'date', 'time'],
      data: {
          'items': [{
              "name": "Lisa",
                  "email": "[EMAIL="
              lisa@simpsons.com "]lisa@simpsons.com[/EMAIL]",
                  "phone": "555-111-1224",
                  "date": "12/21/2012",
                  "time": "12:22:33"
          }, {
              "name": "Bart",
                  "email": "[EMAIL="
              bart@simpsons.com "]bart@simpsons.com[/EMAIL]",
                  "phone": "555-222-1234",
                  "date": "12/21/2012",
                  "time": "12:22:33"
          }, {
              "name": "Homer",
                  "email": "[EMAIL="
              home@simpsons.com "]home@simpsons.com[/EMAIL]",
                  "phone": "555-222-1244",
                  "date": "12/21/2012",
                  "time": "12:22:33"
          }, {
              "name": "Marge",
                  "email": "[EMAIL="
              marge@simpsons.com "]marge@simpsons.com[/EMAIL]",
                  "phone": "555-222-1254",
                  "date": "12/21/2012",
                  "time": "12:22:33"
          }]
      },
      proxy: {
          type: 'memory',
          reader: {
              type: 'json',
              root: 'items'
          }
      }
  });
  Ext.define('DynamicGridPanel', {
      extends: 'Ext.grid.Panel',
      alias: 'widget.dynamicGridPanel',
      title: 'Simpsons',
      store: Ext.data.StoreManager.lookup('simpsonsStore'),
      selType: 'rowmodel',
      plugins: [
      Ext.create('Ext.grid.plugin.CellEditing', {
          clicksToEdit: 1
      })],
      height: 200,
      width: 200
  });
  
  Ext.define('DynamicPanel', {
      extend: 'Ext.panel.Panel',
      alias: 'widget.dynamicPanel',
      title: 'DynamicAdd',
      width: 200,
      height: 200
  });
  Ext.define('MainPanel', {
      extend: 'Ext.panel.Panel',
      alias: 'widget.dynamicMainPanel',
      title: 'MainPanel',
      renderTo: Ext.getBody(),
      width: 600,
      height: 600,
      constructor: function (config) {
          var me = this;
          me.callParent(arguments);
          me.dpanel = Ext.create('DynamicPanel');
          me.dgridpanel = Ext.create('DynamicGridPanel');
          me.items = [this.dpanel, this.dgridpanel];
      }, //eo constructor
      onRender: function () {
          var me = this;
          me.callParent(arguments);
          //I am getting  error at the below lines saying the dpanel and dynamicGridPanel  undefined
          me.dpanel.add(this.elements);
          me.dynamicGridPanel.columns.add(this.gridcolumns);
      }
  });
  var panel1 = Ext.create('MainPanel', {
      gridcolumns: [{
          xtype: 'actioncolumn',
          width: 42,
          dataIndex: 'notes',
          processEvent: function () {
              return false;
          }
      }, {
          xtype: 'gridcolumn',
          header: 'Name',
          dataIndex: 'name',
          editor: 'textfield'
      }, {
          xtype: 'gridcolumn',
          header: 'Email',
          dataIndex: 'email',
          flex: 1,
          editor: {
              xtype: 'textfield',
              allowBlank: false
          }
      }, {
          header: 'Phone',
          dataIndex: 'phone'
      }, {
          xtype: 'gridcolumn',
          header: 'Date',
          dataIndex: 'date',
          flex: 1,
          editor: {
              xtype: 'datetextfield',
              allowBlank: false
          }
      }, {
          xtype: 'gridcolumn',
          header: 'Time',
          dataIndex: 'time',
          flex: 1,
          editor: {
              xtype: 'timetextfield',
              allowBlank: false
          }
      }],
      elements: [{
          xtype: 'numberfield',
          width: 70,
          tabIndex: 1,
          fieldLabel: 'Account No',
          itemId: 'acctno',
          labelAlign: 'top'
      }, {
          xtype: 'textfield',
          itemId: 'lastname',
          width: 90,
          tabIndex: 2,
          fieldLabel: 'Last Name',
          labelAlign: 'top'
      }, {
          xtype: 'textfield',
          itemId: 'firstname',
          width: 100,
          tabIndex: 3,
          fieldLabel: 'First Name',
          labelAlign: 'top'
      }]
  });
  </code></pre>