title: How to switch between 2 components in Ext JS BorderLayout region
body: <p>i have created here 2 regions( west and center ) of grid panels viewport ,
  now what i want is i want to change "xtype" dynamically of center</p>
  
  <p>presently "xtype" is 'examplegrid' i want to change it to 'eontable'
  when i click on columns of region of "west" ......</p>
  
  <p>here is the code : for extjs </p>
  
  <pre><code>(
  
  function output()
   {
  
      Ext.ns('supplierlist');
      Ext.BLANK_IMAGE_URL = '/extjs/ext/resources/images/default/s.gif';
  
      /********************************Code For Suppliers*****************************/
  
  }
  //end function var_dump
  supplierlist.Grid = Ext.extend(Ext.grid.GridPanel, {
      initComponent: function() {
          var config = {
              store: new Ext.data.JsonStore({
                  id: 'supplier',
                  totalProperty: 'totalcount',
                  root: 'rows',
                  url: 'get_suppliers_list.php',
                  fields: [{
                      name: 'supplier'
                  }]
              }),
              columns: [{
                  id: 'supplier',
                  header: 'Suppliers List',
                  width: 40,
                  sortable: true,
                  dataIndex: 'supplier'
  
              }],
              viewConfig: {
                  forceFit: true
              }
          }
          this.addListener('click',
          function(val) {
  
  
              });
          Ext.apply(this, Ext.apply(this.initialConfig, config));
          supplierlist.Grid.superclass.initComponent.apply(this, arguments);
  
      }
  
      ,
      onRender: function() {
          // call parent
          supplierlist.Grid.superclass.onRender.apply(this, arguments);
  
          // load the store
          this.store.load({
              params: {
                  start: 0,
                  limit: 20
              }
          });
  
  
      }
      // eo function onRender
  });
  
   Ext.reg('printsuppliers', supplierlist.Grid);
  
  
   Ext.ns('Example');
  
  
  // example grid pre-configured class
   Example.Grid = Ext.extend(Ext.grid.GridPanel, {
      initComponent: function() {
          var config = {
              store: new Ext.data.JsonStore({
                  //                              
                  id: 'company'
                  ,
                  totalProperty: 'totalCount'
                  ,
                  root: 'rows'
                  ,
                  url: 'get-grid-data.php'
                  ,
                  fields: [
  
                  ]
              })
              ,
              columns: [{
                  id: 'Smart Metering'
                  ,
                  header: "Smart Metering"
                  ,
                  width: 40,
                  sortable: true
  
              }
              ]
              ,
              viewConfig: {
                  forceFit: true
              }
          };
          // eo config object
          // apply config
          Ext.apply(this, Ext.apply(this.initialConfig, config));
  
          this.bbar = new Ext.PagingToolbar({
              store: this.store
              ,
              displayInfo: true
              ,
              pageSize: 20
          });
  
          // call parent
          Example.Grid.superclass.initComponent.apply(this, arguments);
      }
      // eo function initComponent
  
      ,
      onRender: function() {
  
          // call parent
          Example.Grid.superclass.onRender.apply(this, arguments);
  
          // load the store
          this.store.load({
              params: {
                  start: 0,
                  limit: 20
              }
          });
  
      }
      // eo function onRender
  });
   Ext.reg('examplegrid', Example.Grid);
  
  
  
  
  
   Ext.ns('eon');
  
  
  // example grid pre-configured class
   eon.Grid = Ext.extend(Ext.grid.GridPanel, {
      initComponent: function() {
          var config = {
              store: new Ext.data.JsonStore({
                  //                              
                  id: 'company'
                  ,
                  totalProperty: 'totalCount'
                  ,
                  root: 'rows'
                  ,
                  url: 'get-grid-data.php'
                  ,
                  fields: [
  
                  ]
              })
              ,
              columns: [{
                  id: 'dummy'
                  ,
                  header: "dummy"
                  ,
                  width: 40,
                  sortable: true
  
              }
  
              ]
              ,
              viewConfig: {
                  forceFit: true
              }
          };
          // eo config object
          // apply config
          Ext.apply(this, Ext.apply(this.initialConfig, config));
  
          this.bbar = new Ext.PagingToolbar({
              store: this.store
              ,
              displayInfo: true
              ,
              pageSize: 20
          });
  
          // call parent
          eon.Grid.superclass.initComponent.apply(this, arguments);
      }
      // eo function initComponent
  
      ,
      onRender: function() {
  
          // call parent
          eon.Grid.superclass.onRender.apply(this, arguments);
  
          // load the store
          this.store.load({
              params: {
                  start: 0,
                  limit: 20
              }
          });
  
      }
      // eo function onRender
  });
   Ext.reg('eontable', eon.Grid);
  
  
   Ext.onReady(function() {
  
      Ext.QuickTips.init();
  
      // create viewport with border layout
      var viewport = new Ext.Viewport({
          layout: 'border'
          ,
          id: 'vp'
          ,
          items: [{
              region: 'center'
              ,
              layout: 'fit'
              ,
              title: 'Center'
              ,
              xtype: 'examplegrid'
          },
          {
              region: 'west'
              ,
              title: 'Suppliers'
              ,
              width: 220
              ,
              xtype: 'printsuppliers'
              ,
              split: true
              ,
              collapsible: true
          }]
      });
  
  });
  
  }`)
  </code></pre>
  
  <p>code
  for php</p>
  
  <pre><code>(`
  
  $start = @$_REQUEST["start"];
   $limit = @$_REQUEST["limit"];
  
   $start = $start ? $start: 0;
   $limit = $limit ? $limit: 5;
  
   $data = array(
  array("supplier" = &gt;'a1'),
  array("supplier" = &gt;'a2'),
  array("supplier" = &gt;'a3'),
  array("supplier" = &gt;'a4'),
  array("supplier" = &gt;''),
  array("supplier" = &gt;''),
  array("supplier" = &gt;''),
  array("supplier" = &gt;''),
  array("supplier" = &gt;''),
  array("supplier" = &gt;''),
  array("supplier" = &gt;'')
  );
   $a = array();
   $limit = ($limit &gt; count($data)) ? $limit = count($data) : $limit;
  for ($i = $start; $i &lt; $start + $limit; $i++) {
      $a[] = $data[$i];
  }
  
  
  $o = array(
  "success" = &gt;true
  , "totalCount" = &gt;sizeof($data)
  , "rows" = &gt;$a
  );
  
   echo json_encode($o);
  
  // eof
   ? &gt;
  
  )
  </code></pre>