title: ExtJS. Fit Grid Width into a Panel
body: <p>I'm very new on ExtJs and I can't solve a problem.</p>
  
  <p>I have a grid that it is adjusted to its panel container (layout:fit) but when I colapse the panel, the grid doesn't adjust to the new Width. If I'm not mistaken, ExtJs can do this automaticaly.</p>
  
  <p>Here is my code</p>
  
  <pre><code>Ext.create('Ext.Viewport', {
      id: 'myview',
      layout: 'border',
      items:
          [
              {
                  //Top region
                  region: 'north',
                  title: "My north Title",
                  //split: false,
                  tbar: CreateTButtons() //Create some toolbar buttons
              }, {
                  //South region
                  region: 'south',
                  contentEl: 'footer',
                  split: true,
                  height: 25,
                  minSize: 100,
                  maxSize: 200,
                  collapsible: false,
                  collapsed: false,
                  margins: '0 0 0 0',
                  align:'right'
              }, {
                  //East region
                  xtype: 'tabpanel',
                  id: 'eastTabPanel',
                  region: 'east',
                  title: "My east title",
                  dockedItems: GetEastItems(), //Create East Items
                  animCollapse: true,
                  collapsible: true,
                  split: false,
                  width: 225,
                  minSize: 175,
                  maxSize: 400,
                  margins: '0 5 0 0',
                  activeTab: 1,
                  tabPosition: 'bottom'
              }, {
                  //West items
                  region: 'west',
                  id: 'west-panel',
                  title: 'West',
                  split: true,
                  width: 200,
                  minWidth: 175,
                  maxWidth: 400,
                  collapsible: true,
                  animCollapse: true,
                  margins: '0 0 0 0',
                  layout: 'accordion',
                  items: GetWestItems() //Create west items
              },
              objTabPanel //Here is my problem. Center region is a TabPanel
          ]
  });
  
  //objTabPanel
  objTabPanel = Ext.create('Ext.tab.Panel', {
      region: 'center',
      id: 'mainTabPanel',
      /*forceFit: true,*/
      layout: 'fit',
      viewConfig: {forceFit: true}, //Very important to autosize to the container layer
      //deferredRender: false,
      activeTab: 0,
      items: CMainContent() //Creates a very simple grid
  })
  
  //This is the very simple grid
  
  grid = new Ext.grid.GridPanel({
      title: "My Grid Title",
      store: store,
      stripeRows: true,
      //forceFit: true,
      layout: 'fit',
      // grid columns
      columns:
          [
              {
                  id: 'id',
                  header: "Id",
                  dataIndex: 'Id',
                  width: 50,
                  sortable: true
              }, {
                  id: 'name',
                  header: "Name",
                  dataIndex: 'Name',
                  width: 100,
                  sortable: true
              }
          ],
      viewConfig: { forceFit: true }, //Very important to autosize to the container layer
      tbar: //tbar = TopBar
          [
              {
                  text: "Add",
                  iconCls: 'btn-add',
                  scope: this,
                  handler: addHandler
              }
          ],
      // paging bar on the bottom
      //bbar = BottomBar
      bbar: new Ext.PagingToolbar({
          pageSize: 50,
          store: myStore,
          displayInfo: true,
          emptyMsg: "No topics to display"
      })
  
  });
  
  
  //To render the grid
  grid.render('panel');
  
  //My initial HTML Code
  &lt;body&gt;
      &lt;div id="content"&gt;
          &lt;div id="panel"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Can someone help me?</p>
  
  <p>Than you    </p>