title: Extjs Dynamic Grid
body: <p>I'm trying to create a dynamic <code>grid</code> using ExtJS. The <code>grid</code> is built and displayed when a click event is fired then an <code>ajax</code> request is sent to the server to fetch the columns, records and records definition <code>a.k.a</code> store fields. </p>
  
  <p>Each node could have different <code>grid</code> structure and that depends on the level of the node in the <code>tree</code>. </p>
  
  <p>The only way I came up with so far is :</p>
  
  <pre><code>function showGrid(response, request) {
      var jsonData = Ext.util.JSON.decode(response.responseText);
      var grid = Ext.getCmp('contentGrid' + request.params.owner);
  
      if (grid) {
          grid.destroy();
      }
  
      var store = new Ext.data.ArrayStore({
          id: 'arrayStore',
          fields: jsonData.recordFields,
          autoDestroy: true
      });
  
      grid = new Ext.grid.GridPanel({
          defaults: {
              sortable: true
          },
          id: 'contentGrid' + request.params.owner,
          store: store,
          columns: jsonData.columns,
          //width:540,
          //height:200,
          loadMask: true
      });
  
  
      store.loadData(jsonData.records);
      if (Ext.getCmp('tab-' + request.params.owner)) {
          Ext.getCmp('tab-' + request.params.owner).show();
      } else {
          grid.render('grid-div');
          Ext.getCmp('card-tabs-panel').add({
              id: 'tab-' + request.params.owner,
              title: request.params.text,
              iconCls: 'silk-tab',
              html: Ext.getDom('grid-div').innerHTML,
              closable: true
          }).show();
      }
  }
  </code></pre>
  
  <p>The function above is called when a click event is fired </p>
  
  <pre><code>'click': function(node) {
      Ext.Ajax.request({
              url: 'showCtn',
              success: function(response, request) {
                  alert('Success');
                  showGrid(response, request);
              },
              failure: function(results, request) {
                  alert('Error');
              },
              params: Ext.urlDecode(node.attributes.options);
          }
      });
  }
  </code></pre>
  
  <p>The problem I'm getting with this code is that a new grid is displayed each time the showGrid function is called. The end user sees the old grids and the new one. To mitigate this problem, I tried destroying the grid and also removing the grid element on each request, and that seems to solve the problem only that records never get displayed this time.</p>
  
  <pre><code>if (grid) {
      grid.destroy(true);
  }
  </code></pre>
  
  <p>The behaviour I'm looking for is to display the result of a grid within a tab and if that tab exists replaced the old grid. </p>
  
  <p>Any help is appreciated.</p>