PDA

View Full Version : Multiple stores for the same grid



silve69
18 Aug 2009, 12:51 PM
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


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,
fields: guest_fields
});

App.sample.viewGrid = Ext.extend(Ext.grid.GridPanel, {
colModel : users_columns,
viewConfig : { forceFit: true },
initComponent : function() {
this.store = users_store;
this.on({
afterlayout:{scope:this, single:true, fn:function() {
this.store.load({params:method:'POST'});
}}
});
}
});
Ext.reg('viewGrid', App.sample.viewGrid);


index.js file



... 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({
id: id,
xtype: items[index][1][3], // return "viewGrid"
title: itemMenu.text,
iconCls: items[index][1][0],
layout: 'fit',
store: items[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
// 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