Hello friends,
Currently I'm working in an ExtJS project and i have the follow situation:
- MySQL Database with several tables and PHP in the backend
- A viewport with north, west, center,east and south regions
- In the center region I'm opening differents tabs, depending of the menu item selected.
- I extended a gridpanel and formpanel for view and edit the database information.
My question is:
How can I re-use the extended gridpanel with differents stores? (each store will read information from different databases)
I tryed re-assigning dynamicly the new store and refreshing the store, but the grid always shows the same information, no changes.

viewGrid.js file
PHP Code:
Ext.ns('App''App.sample');
 
var 
users_fields = [...]; 
var 
guest_fields = [...];
 
var 
users_columns = [...];
var 
guest_columns = [...];
 
var 
users_store = new Ext.data.JsonStore ({ 
     
idProperty'iduser',
     
totalProperty:'total'
     
root:'results',
     
url'/modules/view.php?action=viewUsers,
     fields: users_fields
});
 
var guest_store = new Ext.data.JsonStore ({ 
     idProperty: '
idguest',
     totalProperty:'
total', 
     root:'
results',
     url: '
/modules/view.php?action=viewGuest,
     
fieldsguest_fields
});
 
App.sample.viewGrid Ext.extend(Ext.grid.GridPanel, {
     
colModel users_columns,
     
viewConfig : { forceFittrue },
     
initComponent : function() {
          
this.store users_store;
          
this.on({ 
               
afterlayout:{scope:thissingle:truefn:function() { 
                    
this.store.load({params:method:'POST'});
               }}
          });
     }
});
Ext.reg('viewGrid'App.sample.viewGrid); 
index.js file
PHP Code:
 
... code here ...
 
Ext.onReady(function() {
     
Ext.QuickTips.init();
 
     var 
north = new Ext.BoxComponent({ ... header region ... });
     var 
west = new Ext.tree.TreePanel({ ... menu region ... });
     var 
center = new Ext.Panel({ ... content area ... });
     var 
east = new Ext.Panel({ ... property panel ... });
     var 
south = new Ext.BoxComponent({ ... footer region ... });
 
     ... 
code here ...
 
     
west.on ('clickMenu', function(itemMenu){
          
id itemMenu.id;
          
index itemMenu.index;
          var 
tab;
          var 
tp center.items.itemAt(0);
          if (!(
tab center.findById(id))){
              var 
tab tp.add({ 
                   
idid,
                   
xtypeitems[index][1][3], // return "viewGrid"
                   
titleitemMenu.text,
                   
iconClsitems[index][1][0],
                   
layout'fit',
                   
storeitems[index][1][0] + '_store' // return "users_store" or "guest_store"
              
});
          }
          
tab.store.reload();  // <--- this not work!!
          
tp.setActiveTab(tab);
     });
 
     ... 
code here ...
 
     var 
viewport = new Ext.Viewport({
          
layout:'border',
          
items:[north,west,center,east,south]
     });
}); 
view.php file
PHP Code:
<?php
     
// get action 
     
$action = isset($_REQUEST["action"]) ? $_REQUEST["action"] : false;
 
     switch (
$action) {
          case 
"viewUsers":
               
$user = new User(); // defined class
               
$count  $user->countUsers();
               
$result $user->getUsersBy();
               
$answer = Array('total'=>$count'results'=>$result);
               break;
          case 
"viewGuest":
               
// the same actions but reading from guest table
               
break;
     }
     
// return response to JS 
    
header("Content-Type: application/json");
    echo 
json_encode($answer);
?>
What is wrong? do you know a better way for loading multiple stores to the same grid?
Best regards,

Silver