PDA

View Full Version : from Json Data Store file generate Multiple grids



abhigudi
20 Feb 2013, 10:56 AM
Hi

I need a help regarding generating multiple grid using one store data file i.e

for example

I have a json format store data that has the information for multiple years.
2007,2008,2009 and so on .
I want to create multiple grid for each year.

like the attached sample ,can anyone help me out in this
41968

scottmartin
20 Feb 2013, 11:51 AM
Can you narrow down your question? Do you need help with the data, creating the grids?
Do you have control over the JSON?

I am not sure I understand:

I want to create multiple grid for each year.

As the image shows a grid for each year.

Scott.

abhigudi
21 Feb 2013, 3:19 AM
Hi Scott,

I have the full control over the json data.
To be more specific ,
1. when i get the json data suppose if the data is like
<code>
data: {
"Year": [
{
"2006": {
"streetfeest": "",
"ABCfess": "",
"ABCRank": ""
}
},
{
"2007": {
"streetfeest": "",
"ABCfess": "",
"ABCRank": ""
}
},
{
"2008": {
"streetfeest": "",
"ABCfess": "",
"ABCRank": ""
}
},
{
"2009": {
"streetfeest": "",
"ABCfess": "",
"ABCRank": ""
}
}
]
}
</code>
2. I want to create create a grid for each year with the look and feel of the attached image.
3. And also want to dynamically create div element for each year to where to be rendered .

Hope this details will help you answer my question.

Regards
Abhi

scottmartin
21 Feb 2013, 6:24 AM
Since the dates are a variable, I would remove them from the json record and make them data ... and then parse the 'ranks' into a subset .. I am not sure of the structure, but you get the idea:



{
"data": [
{
"Year": "2006",
"streetfeest": "2006",
"ranks" : {
"ABCfess": "2006",
"ABCRank": "2006"
}
},
{
"Year": "2007",
"streetfeest": "2007",
"ranks" : {
"ABCfess": "2007",
"ABCRank": "2007"
}
},
{
"Year": "2008",
"streetfeest": "2008",
"ranks" : {
"ABCfess": "2008",
"ABCRank": "2008"
}
},
{
"Year": "2009",
"streetfeest": "2009",
"ranks" : {
"ABCfess": "2009",
"ABCRank": "2009"
}
}
]
}




Ext.onReady(function () {
var store = new Ext.data.Store({
autoLoad : true,

fields : [
{ name : 'Year', type : 'string', mapping : 'Year' },
{ name : 'streetfeest', type : 'string', mapping : 'streetfeest' },
{ name : 'ABCfess', type : 'string', mapping : 'ranks.ABCfess' },
{ name : 'ABCRank', type : 'string', mapping : 'ranks.ABCRank' }
],

proxy : {
type : 'ajax',
url : 'data.json',
reader : {
type : 'json',
root : 'data'
}
},
listeners : {
load : function (store, recs) {
console.log(store);
console.log(store.getCount());
}
}
});

});


As for the separate grids, you would have to setup separate stores for each. You would have the main store to load all of the data, then parse the records into each of their grid stores as filtering a single store would display the same across all grids.

Scott.

abhigudi
21 Feb 2013, 7:12 AM
Hi

How is that we can setup separate stores for each grids from the main store.
can u advice on this.


Since the dates are a variable, I would remove them from the json record and make them data ... and then parse the 'ranks' into a subset .. I am not sure of the structure, but you get the idea:



{
"data": [
{
"Year": "2006",
"streetfeest": "2006",
"ranks" : {
"ABCfess": "2006",
"ABCRank": "2006"
}
},
{
"Year": "2007",
"streetfeest": "2007",
"ranks" : {
"ABCfess": "2007",
"ABCRank": "2007"
}
},
{
"Year": "2008",
"streetfeest": "2008",
"ranks" : {
"ABCfess": "2008",
"ABCRank": "2008"
}
},
{
"Year": "2009",
"streetfeest": "2009",
"ranks" : {
"ABCfess": "2009",
"ABCRank": "2009"
}
}
]
}




Ext.onReady(function () {
var store = new Ext.data.Store({
autoLoad : true,

fields : [
{ name : 'Year', type : 'string', mapping : 'Year' },
{ name : 'streetfeest', type : 'string', mapping : 'streetfeest' },
{ name : 'ABCfess', type : 'string', mapping : 'ranks.ABCfess' },
{ name : 'ABCRank', type : 'string', mapping : 'ranks.ABCRank' }
],

proxy : {
type : 'ajax',
url : 'data.json',
reader : {
type : 'json',
root : 'data'
}
},
listeners : {
load : function (store, recs) {
console.log(store);
console.log(store.getCount());
}
}
});

});


As for the separate grids, you would have to setup separate stores for each. You would have the main store to load all of the data, then parse the records into each of their grid stores as filtering a single store would display the same across all grids.

Scott.

abhigudi
25 Feb 2013, 7:27 AM
Hi Scott...

One quick question.

here in the above example i will be generating the grid based on the data from the store .i mean there will be no restriction to the total number of year.

i need to know that how is that possible to change the column header to Year (dynamically) and also generation of store from a store will be helpful for this requirement... instead can we use ext.each ..

suggestion please.

Thanks
Abhi

scottmartin
25 Feb 2013, 7:43 AM
See if the following will help:



Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'change' : 100 },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'change' : 23 },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header : 'Name', dataIndex : 'name' },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change',
renderer : function(val, meta, record, rowIndex, colIndex, store, view){
var gr = view.up('grid');
grid.headerCt.getHeaderAtIndex(colIndex).setText('New Header'); // use record to change
return val;
}
}
],
height : 200,
width : 400,
renderTo : Ext.getBody()
});

// manually
grid.headerCt.getHeaderAtIndex(0).setText('New Header');


Scott.

abhigudi
25 Feb 2013, 9:36 AM
Hi Scott...

I think i am going confused .

Hope you saw the first thread which has the attached image ,that is what i am expecting from the Json data..For each Year i want to create a Grid.Every thing is dynamic the column header and the grid also.

Thanks
Abhi

scottmartin
25 Feb 2013, 10:02 AM
Did you restructure your json? At what point are you getting lost?
There are several things going on here.

If you want a grid for each year, you will need to cycle through the reader of the main store that is loading all of the data and push it to each grid store.

Scott.

abhigudi
25 Feb 2013, 10:12 AM
Hi Scott

I understood the solution that from the main store create different store based on the year filter ,but my question is that how is that i will push or create grid on the go .as i want the grid to created dynamically.

abhigudi
6 Mar 2013, 2:16 AM
Thanks Scott...Am able to generate multiple grids using single store(i.e multiple instance of store for each grid).