title: how to reconfigure grid with store and columns
body: <p>I am trying to write a generic panel component with a search text field, a search button and a grid displaying the results. What I am aiming for is a generic component and you can create different instances of it with more or less columns, different column titles and different search logic.</p>
  
  <p>I have created ExtJS4 code with Sencha Architect 2 where this stuff looks as follows:</p>
  
  <pre><code>initComponent: function() {
      var me = this;
  
      Ext.applyIf(me, {
          items: [
              {
                  xtype: 'textfield',
                  itemId: 'txtObjSearch',
                  fieldLabel: 'Search for'
              },
              {
                  xtype: 'button',
                  itemId: 'btnSearch',
                  icon: '/rhidmoplus/icons/zoom.png',
                  text: 'Search'
              },
              {
                  xtype: 'gridpanel',
                  itemId: 'gridResultObjects',
                  title: '',
                  store: 'testStore',
                  colspan: 2,
                  columns: [
                      {
                          xtype: 'gridcolumn',
                          dataIndex: 'MSKEYVALUE',
                          text: 'ID'
                      },
                      {
                          xtype: 'gridcolumn',
                          dataIndex: 'DISPLAYNAME',
                          text: 'Displayname'
                      }
                  ],
                  viewConfig: {
                      itemId: 'gridView'
                  }
              }
          ]
      });
  
      me.callParent(arguments);
  },
  </code></pre>
  
  <p>The store and the 2 columns are only dummies. I want to provide the real store and the real column configuration in the constructor of the custom component. I found the GridPanel.reconfigure (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure) method which seemed to perfectly fit my needs.
  However, the following code yields an error:</p>
  
  <pre><code>    ////////////////////////
      // Prepare store
      ////////////////////////
  
      // prepare fields and columns
      var __fields = [];
      var __columns = [];
  
      for (var jj=0; jj&lt;config.columns.length; jj++) {
          var item2 = {};
          var item = [];
          // for fields
          item.name = config.columns[jj].title;
          __fields.push (item);
          // for columns
          item2.xtype = 'gridcolumn';
          item2.dataIndex = config.columns [jj].dataIndex;
          item2.text = config.columns [jj].title;
          __columns.push (item2);    
      }
  
      console.debug ('columns.length = ' + __columns.length + ', fields.length = ' + __fields.length);
  
      var sm = new Ext.selection.RowModel();
      //sm.bindComponent (grid.getView ());
  
      var __store = Ext.create ('Ext.data.Store', {
          storeId: config.storeId,
          fields: __fields,
          selModel: sm,
          proxy: {
              type: 'ajax',
              url: '/rhidmo/rest/ktec_js_searchUtils',
              reader: {
                  type: 'json',
                  root: 'entries'
              }
          }
      });
  
      grid.reconfigure (__store, __columns);
  </code></pre>
  
  <p>which is:</p>
  
  <p>Uncaught TypeError: Cannot read property 'length' of undefined</p>
  
  <p>in the method onLastFocusChanged of the selection model. If I pass null as first argument of reconfigure then this doesn't happen but I would like to dynamically create a store (otherwise each instance of my component uses the same store which is certainly not good).</p>
  
  <p>Maybe my configuration of the store is not correct but I copied it from the code Sencha Architect creates, so it can't be that wrong.</p>
  
  <p>Thanks for any hint.
  Cheers
  Kai</p>
  
  <p>========================================</p>
  
  <p>Hi, now changed the code:</p>
  
  <pre><code>// prepare fields and columns
  var __fields = [];
  var __columns = [];
  
  for (var jj=0; jj&lt;config.columns.length; jj++) {
      var item2 = Ext.create ('Ext.grid.column.Column', {
          dataIndex: config.columns [jj].dataIndex,
          text: config.columns [jj].title
      });
      var item = Ext.create ('Ext.data.Field', {
          name: config.columns[jj].title
      });
      __fields.push (item);
     __columns.push (item2);    
  }
  </code></pre>
  
  <p>and I still get the same error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'length' of undefined
  Ext.define.onLastFocusChangedext-all-debug.js:89284
  Ext.define.setLastFocusedext-all-debug.js:59431
  Ext.define.clearSelectionsext-all-debug.js:59543
  Ext.define.refreshext-all-debug.js:59523
  Ext.define.bindext-all-debug.js:59143
  Ext.define.bindStoreext-all-debug.js:60584
  Ext.define.bindStoreext-all-debug.js:78007
  Ext.define.reconfigureext-all-debug.js:78033
  Ext.define.configureGenericSearchPanel.js:141
  Ext.define.onStoreTestPanelRenderMainController.js:471
  fireext-all-debug.js:10658
  </code></pre>