title: Extjs Tabpanel Resize
body: <p>I've implemented an EXTJS 4.0 tabpanel containing two grids.</p>
  
  <p>This all runs fine when i first load it. But when i go to another panel( not a child of the tabpanel) and then reload the tabpanel in the viewport OR  resize my browser window, the HTML child homeclients (my grid) dissappears ( and it's HTML element is removed from the tabpanel).</p>
  
  <p><img src="https://i.stack.imgur.com/jizrO.png" alt="enter image description here"></p>
  
  <p>Anybody have any idea why this is happening ?</p>
  
  <p>Tabpanel:</p>
  
  <pre><code>Ext.define('EY.view.center.home.container.Panel', {
      extend: 'Ext.tab.Panel',
      alias: 'widget.containerhome',
      id: 'containerhome',
      activeTab: 1,
  
      border: false,
      resizeTabs:true,
  
       items: [{
              title: 'Most Used clients',
              iconCls: 'tabIcon',
              xtype: 'mostUsedClients',
              id: 'mostUsedClients',
              scale: 'large'
          },{
                  title: 'All Clients',
                  xtype: 'homeclients',
                  id: 'homeclients',
                  scale: 'large'
              }
          ],
      requires: [
          'EY.view.center.home.client.Grid',
           'EY.view.center.home.client.mostUsedClients.mostUsedClients'
  ],
  
  
      initComponent: function () {
          Ext.apply(this, {
  
  
  
          })
          this.callParent(arguments);
      }
  });
  </code></pre>
  
  <p>Grid:</p>
  
  <pre><code>Ext.define('EY.view.center.home.client.Grid', {
      extend: 'Ext.grid.Panel',
      alias: 'widget.homeclients',
      id: 'homeclients',
      baseCls: 'homeclients',
      //frame:true,
      store: 'Clients', //Ext.data.StoreManager.lookup('serviceStore'),
      contextMenu: undefined,
  
      border: false,
      //flex: 1,
      padding: 3,
      hideHeaders: true,
  
      columns: [
          { header: 'CLIENTS', field: 'textfield', flex: 1 }
  
          ],
  
  
      features: [
          Ext.create('Ext.grid.feature.RowBody', {
              getAdditionalData: function (data, rowIndex, rec, orig) {
                  var headerCt = this.view.headerCt;
                  var colspan = headerCt.getColumnCount();
                  return {
  
                      rowBody: createHtml(rec),
                      rowBodyCls: this.rowBodyCls,
                      rowBodyColspan: colspan
                  };
              }
          }),
           {
               ftype: 'rowwrap'
           }
      ],
  
  
  
      viewConfig: {
          listeners: {
              itemclick: function (list, index, target, record, event) {
                  if (event.target.id == 'grandAccess') {
  
                      var windowIsClosed = Ext.getCmp('ConfirmationWindow');
                      if (!windowIsClosed) {
                          var clientId = index.data.id;
                          var clientVat = index.data.rn;
                          eDocsUser.currentClientName = index.data.n;
                          eDocsUser.currentClientId = clientId;
                          eDocsUser.currentClientRegisterNummer = clientVat;
  
                          showGrantAccesWindow(index);
                      }
                  } else {
  
                      if (Ext.getCmp('ConfirmationWindow')) {
                          Ext.getCmp('ConfirmationWindow').hide();
                      }
                      loadDataOfSelectedClient(index);
                  }
  
              }
          }
      },
  
  
  
  
  
      initComponent: function () {
  
  
          this.callParent(arguments);
  
      }
  });
  </code></pre>