PDA

View Full Version : Same grid but different stores



silve69
1 Sep 2009, 3:17 PM
Hello friend,

I have a center region where I opened different grids inside tabpanels, every grid has a different store (depending of menu item selected)
My problem: Despite the JSON data is loaded correctly for every different store, in the grid always is showed the same info.

Here the grid is created:


west.on('clickMenu', function(itemMenu){
idSelected = itemMenu.id;
indexSelected = itemMenu.index;
var tab;
var tp = center.items.itemAt(0);
if (!(tab = center.findById(idSelected))){
var tab = tp.add({
id: idSelected,
xtype: 'viewGrid',
title: itemMenu.text,
iconCls: 'icon_grid',
layout: 'fit'
});
}
tp.setActiveTab(tab);
});


Here the grid extension:


Ext.ns('App', 'App.hrtester');
App.hrtester.viewGrid = Ext.extend(Ext.grid.GridPanel, {
closable: true,
columnLines : true,
loadMask : {msg:'Loading content...'},
colModel : eval(subItemsMenu[indexSelected][1][0]+'_columns'), // <-- this return "grid1_columns"
viewConfig : { forceFit: true },
initComponent : function() {
this.store = eval(subItemsMenu[indexSelected][1][0]+'_store'); // <-- this return "grid1_store"
// afterlayout event listener
this.on({
afterlayout:{scope:this, single:true, fn:function() {
this.store.load();
}}
});
// super
App.hrtester.viewGrid.superclass.initComponent.call(this);
}
});
Ext.reg('viewGrid', App.hrtester.viewGrid);


These vars are loaded in the main file:


grid1_columns = new Ext.grid.ColumnModel([
{id: 'iduser', header: "ID", dataIndex: 'iduser', sortable:true, width: 50},
{id: 'name', header: "Name", dataIndex: 'name', sortable:true, width: 180},
{id: 'age', header: "Age", dataIndex: 'age', sortable:true, align:'center', width: 80}
]);

grid2_columns = new Ext.grid.ColumnModel([
{id: 'iduser', header: "ID", dataIndex: 'iduser', sortable:true, width: 50},
{id: 'name', header: "Name", dataIndex: 'name', sortable:true, width: 180},
{id: 'group', header: "Group", dataIndex: 'group', sortable:true, width: 80},
{id: 'salary', header: "Salary", dataIndex: 'salary', sortable:true, width: 100}
]);

grid1_store = new Ext.data.JsonStore({
idProperty: 'iduser',
root: 'results',
url: '../../../modules/view.php?action=viewGrid1',
fields: ['iduser','name','age']
});

grid2_store = new Ext.data.JsonStore({
idProperty: 'iduser',
root: 'results',
url: '../../../modules/view.php?action=viewGrid2',
fields: ['iduser','name','group','salary']
});

For each case the data is loaded correctly from PHP-MySQL, but in every new grid opened the info is the same, not changed.

Thanks in advanced!!
Silver

2 Sep 2009, 4:13 AM
are you sure your code is properly setting the correct store and column model?

silve69
4 Sep 2009, 9:08 PM
Solved!
I found a good solution and I'm sharing it...

I load all the data in one time access to MySQL


var Con = new Ext.data.Connection();
Con.request({
url: '../../../modules/view.php',
method: 'post',
success: function(o){
var r = Ext.decode(o.responseText);
// populating each grid store
storeTestStatus.loadData(r.results.test_status);
storePendingTests.loadData(r.results.pending_tests);
storeCandStatus.loadData(r.results.cand_status);
storeCandTests.loadData(r.results.cand_tests);
storeIndicators.loadData(r.results.indicators);
},
failure: function(){
alert('Ops!');
},
params: {action: 'populateMainPageCharts'}
});


You have the store declarations:


storeTestStatus = new Ext.data.JsonStore({
fields: ['id','iso','name',{name:'pending',type:'int'},{name:'complete',type:'int'}]
});
storePendingTests = new Ext.data.JsonStore({
fields: ['iduser', 'name', 'idassigtest', 'test', 'iso', 'email',{name:'warning',type:'int'}]
});
...


And you need to receive the JSON with the follow structure:


{"results":{"test_status":[{"id":"1","iso":"LUSCHER","name":"Luscher Colors Test","pending":"5","abandon":"1","complete":"1"},...
Regards!!!