PDA

View Full Version : Grid title from JSON store



chrisrichardson
13 Sep 2010, 7:45 AM
I have a grid loaded dynamically using JSON data to generate the columns and grid data. I'm struggling to figure out how to pass in and set the grid title using the JSON data. Is there some way I can set the standard grid properties on the fly? Any ideas?

Thanks, Chris

The following JS takes care of the grid load:

Ext.onReady(function(){
var store = new Ext.data.JsonStore({
url: 'onl-lib.p',
fields:[]

});
store.load();

var xgrid = new Ext.grid.GridPanel({
store:store,
sortable: true,
columns:[],
viewConfig: {
onDataChange: function(){
this.cm.setConfig(this.ds.reader.jsonData.columns);

this.syncFocusEl(0);
}
},
renderTo:'charttable',

});
});

And the JSON looks like this:

{"root":[
{id:1,kdate:"31/08/10",stringtime:"00:00:00",exttemp:"0",inttemp:"0",pin1:"0"},
{id:2,kdate:"31/08/10",stringtime:"01:00:00",exttemp:"0",inttemp:"0",pin1:"0"}
],

metaData: { title: "Title Here", fields: ["kdate","stringtime","exttemp","inttemp","pin1"],
idProperty:"id",
root:"root"},
columns:[
{header: "kdate", dataIndex: "kdate", sortable: true},
{header: "stringtime", dataIndex: "stringtime", sortable: true},
{header: "exttemp", dataIndex: "exttemp", sortable: true},
{header: "inttemp", dataIndex: "inttemp", sortable: true},
{header: "pin1", dataIndex: "pin1", sortable: true}
]
}

chrisrichardson
14 Sep 2010, 3:00 AM
Think Im getting there, some bits of the jigsaw are not quite right though. So the following sets up the store and gets the JSON response from the server. I've added a couple of alerts in an attempt read a custom property from the store:


var xstore = new Ext.data.JsonStore({
url:globurl + '/onl-ajaxlib.p',
fields:[]

});
xstore.load();
alert(xstore.reader.TableTitle);
alert(xstore.reader.TableTitle2);



No luck so far!! The alert always returns "undefined". JSON data returned is this:

{"tt-grid":[
{id:1,datetime:"31/08/2010 00:00:00",exttemp:"0.00",inttemp:"0.00",pin1:"0.00"},
{id:2,datetime:"31/08/2010 01:00:00",exttemp:"0.00",inttemp:"0.00",pin1:"0.00"}
....,
....
],
metaData: {
fields: ["datetime","exttemp","inttemp","pin1"],
idProperty:"id",
root:"tt-grid",
"TableTitle": "Title Here"},
columns:[
{header: "datetime", dataIndex: "datetime", sortable: true},
{header: "exttemp", dataIndex: "exttemp", sortable: true},
{header: "inttemp", dataIndex: "inttemp", sortable: true},
{header: "pin1", dataIndex: "pin1", sortable: true}
],
"TableTitle2": "Title Here"}

chrisrichardson
14 Sep 2010, 5:00 AM
Had to add a load event to see the data.


xstore.on('load', function(store, records) {
Ext.Msg.alert('Status', store.reader.jsonData.TableTitle);
});

For the following JSON:


{"tt-grid":[
{id:1,datetime:"31/08/2010 00:00:00",exttemp:"0.00",inttemp:"0.00",pin1:"0.00"},
{id:2,datetime:"31/08/2010 01:00:00",exttemp:"0.00",inttemp:"0.00",pin1:"0.00"}
],
metaData: {
fields: ["datetime","exttemp","inttemp","pin1"],
idProperty:"id",
root:"tt-grid"},
columns:[
{header: "datetime", dataIndex: "datetime", sortable: true},
{header: "exttemp", dataIndex: "exttemp", sortable: true},
{header: "inttemp", dataIndex: "inttemp", sortable: true},
{header: "pin1", dataIndex: "pin1", sortable: true}],
TableTitle: "Title Here"}

Sometimes I'm pulling my hair out with ext...then things click into place. Sorted!