title: EXT JS 4.1 how to display a grid in tabPanel
body: <p>I am trying to display a grid (object Ext.grid.GridPanel of EXTJS 4.1) in a tabPanel (object Ext.tab.Panel) but I have problems : the grid works perfectly as an independant source code, and the panel works also as an independant source code.
  But when I try to make the grid and the panel working together, it doesn't work.</p>
  
  <p>Grid :</p>
  
  <pre><code> var monGridPanelDetailEcriture = new Ext.grid.GridPanel({
      id: 'monGridPanelDetailEcriture',
      frame: true,
      width: 1100,
      autoHeight: true,
      renderTo: 'gridDetailEcriture',
      store: monStoreDetailEcriture,
      columns: mesColonnesDetailEcriture
  });
  </code></pre>
  
  <p>TabPanel :</p>
  
  <pre><code>var tabs = Ext.create('Ext.tab.Panel', {
      renderTo: document.body,
      width: 450,
      activeTab: 0,     // first tab initially active
      defaults :{
          bodyPadding: 10
      },
      items: [{
          title: 'Short Text',
          closable: true
      },{
          title: 'Long Text'
      }]
  });
  </code></pre>
  
  <p>I search on internet for a solution but each time what I found didn't work :
  I tried this solution which was explained on several forums :</p>
  
  <pre><code>var tabs = Ext.create('Ext.tab.Panel', {
      renderTo: document.body,
      width: 450,
      activeTab: 0,     // first tab initially active
      defaults :{
          bodyPadding: 10
      },
      items: [{
          monGridPanelDetailEcriture 
      },{
          title: 'Long Text'
      }]
  });
  </code></pre>
  
  <p>But I have a Javascript error indicating this is not a way to describe items.</p>
  
  <p>I also tried to create a new type of widget on the Grid (with the property "alias") but it didn't work.</p>
  
  <p>Do someone have a solution ? </p>