Comment basculer entre les 2 composants dans Ext JS région BorderLayout

Question

j'ai créé ici 2 régions (ouest et centre) des panneaux grillagés fenêtre, maintenant ce que je veux est que je veux changer « xtype » dynamique du centre

actuellement « xtype » est « examplegrid » je veux changer à « eontable » quand je clique sur les colonnes de la région de « ouest » ......

est le code ici: pour ExtJS

(

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 pour php

(` 

$start = @$_REQUEST["start"]; 
$limit = @$_REQUEST["limit"]; 

$start = $start ? $start: 0; 
$limit = $limit ? $limit: 5; 

$data = array(
array("supplier" = >'a1'), 
array("supplier" = >'a2'), 
array("supplier" = >'a3'), 
array("supplier" = >'a4'), 
array("supplier" = >''), 
array("supplier" = >''), 
array("supplier" = >''), 
array("supplier" = >''), 
array("supplier" = >''), 
array("supplier" = >''), 
array("supplier" = >'') 
); 
$a = array(); 
$limit = ($limit > count($data)) ? $limit = count($data) : $limit; 
for ($i = $start; $i < $start + $limit; $i++) { 
    $a[] = $data[$i]; 
} 


$o = array(
"success" = >true 
, "totalCount" = >sizeof($data) 
, "rows" = >$a 
); 

echo json_encode($o); 

// eof 
? > 

) 

Answer 1

Je ne vais pas essayer de travailler avec votre exemple de code car il est actuellement en désordre. Cependant, en suivant votre description, il semble que vous fassiez mieux d'explorer le CardLayout.

Définir votre région Centre comme:

{ 
    id: 'center', 
    region: 'center', 
    layout: 'card', 
    border: false, 
    activeItem: 0, 
    items: [ 
     { 
      itemId: 'examplegrid', 
      xtype: 'examplegrid' 
      // other config properties here as needed 
     }, 
     { 
      itemId: 'eontable', 
      xtype: 'eontable' 
      // other config properties here as needed 
     } 
    ] 
}; 

Ensuite, retourner entre les cartes lorsque le contrôle approprié est manipulé dans l'autre région:

Ext.getCmp('center').getLayout().setActiveItem('eontable'); 
// or... 
Ext.getCmp('center').getLayout().setActiveItem('examplegrid'); 

Notez que cette technique conserve une instance singleton des deux types de panneaux autour. Vous pouvez également laisser l'un des panneaux hors de la définition initiale de la région centrale et créer et détruire dynamiquement des panneaux au moment de l'échange. Voici un exemple de passage de « examplegrid » à « eontable »:

var center = Ext.getCmp('center'); 

center.add(Ext.ComponentMgr.create({ 
    itemId: 'eontable', 
    xtype: 'eontable' 
    // other config properties 
})); 

center.getLayout().setActiveItem('eontable'); 

center.remove('examplegrid', true); 

Une opération similaire serait alors utilisé pour passer plus tard de retour de « eontable » à « examplegrid ».

Answer 2

Il y a un exemple de ce que la documentation pour la mise à la frontière: http://www.sencha.com/deploy/dev/docs/?class=Ext.layout.BorderLayout