View Full Version : One grid for one store

29 Jun 2012, 2:12 AM

In my first project I (abolut ExtJS beginner) have to use several grids and datastores and the only difference between them is that they show different parts of data out of the same database table.

Now I got the idea that it would be better only to use one datastore and one grid which are created with parameters. Something like

var myStore = Ext.create('Ext.data.Store', {
url: [Something with PARAM]

var myGrid = Ext.create('Ext.grid.Panel', {
store: myStore(PARAM)

var g = new myGrid(PARAM);

After searching long time in this forum and at Google I got no hint how it could be realized or if it is possiblie at all.

It would be great if someone could tell me if I try something which is not possible in ExtJS or where I can get some hints how to do it.


29 Jun 2012, 6:49 AM
You want to show different data from the same table in 1 grid?

Can you present your question in a different manner .. I am not sure I understand your vision and what is the end result.


1 Jul 2012, 10:13 PM
Hello Scott,

I have a table in which I log how often a specific request occured.

The result should be shown in three different Tabs of a tab panel where one tab shows that last 3 month, another tab the last 6 month and thes last one the last 12 month.

My question is, that I don't need three datastores and three grids because it should be possible to use one store and one grid with parameters. But I can't figgure out how.


2 Jul 2012, 6:11 AM
You can use the same store and call filterBy() or filter() in store load event, on a tab change event to filter the data as needed.


2 Jul 2012, 11:31 PM
Hello Scott,

thank you for the hint. I hope I can test it within the next two days, because another project with higher priority.

I have to look how to sent the parameters to the store.


4 Jul 2012, 11:30 PM
Hello Scott,

meanwhile I tried to find a solution for my problem using your hint. While looking for it I noticed the posibility of using extraParams of the proxy. Now I can set these by


out of the tabs.

But now I face a new problem. Only the last tab is rendered. On the console I can see that the correct data is in the different stores but when the first tabs are activated no grid is visible.

For me it looks like as the grid which is an item of the tab is not activated because I get no output with console.log().

It would be great if you, or someone else, could help me again.

UPDATE: It seems as if the grid is renderes in the last tab an all the updates of the data are displayed there. Am I right when I look for a way how to define where the grid has to be rendered. renderTo tabpanel.id didn't work.

Here some code snippets:

The tabbar:

var MyTabbar = Ext.create('Ext.TabPanel', {
title : "Title",
id: 'tHs',
hidden : false,
items: [{
title: '1st',
id: '1',
items: [grid],
params: {"key":"1"},

fn: function(tabpanel,tab){
console.log(this.id + ' ' + this.params.mon);
store.proxy.extraParams.key='1'; //<< I know it's a redundancy which I want to clean up later

The grid:

var grid = Ext.create('Ext.grid.Panel', {
title : false,
border : 0,

beforerender:{ fn: function () {

store : Ext.data.StoreManager.lookup('store'),
bbar : new Ext.PagingToolbar({
store : 'store',
displayInfo : true,
prependButtons : true,
emptyMsg : "No data",
totalProperty : 'total',
pageSize : 25
columns : [{

The store:

var store = Ext.create('Ext.data.Store', {
storeId : 'store',
autoLoad : true,
remoteSort : true,
model : 'Mod',
proxy : {
type : 'ajax',
url : 'url/to/backend.php',
extraParams: {
task: 'task',
intervall: '1'
reader : {
type : 'json',
root : 'results'