PDA

View Full Version : JsonReader and metaData



strimp099
12 Oct 2009, 2:51 PM
Greetings all:

I am rather new to ExtJS and am having a terrible time trying to utilize the metaData properties for the JsonReader.

I have seen many examples leading in all different directions. I am simply attempting to let the data dictate the fields and column model. It is straight forward for the fields, but how does one create a columnModel through the metaData property?

BitPoet
12 Oct 2009, 10:13 PM
Supposed you are delivering an array of column configs in a property 'colConfig' of your metadata back to your json reader, then it should be as simple as (assuming an existing grid):


var jstore = new Ext.data.JsonStore({
url: '/path/to/your/store/backend',
baseParams: { ...whatever... },
listeners: {
metachange: function(store, meta) {
Ext.getCmp('id-of-your-grid').getColumnModel().setConfig(meta.colConfig);
}
}
});

strimp099
13 Oct 2009, 7:31 AM
Here is the data returned from the server:



{
"metaData":{
"root":"data",
"fields":["k","19SEP2009","17OCT2009","15JAN2010","17APR2010","22JAN2011","21JAN2012"],
"colModel":[
{"dataIndex":"k","header":"Strikes","width":50},
{"dataIndex":"19SEP2009","header":"SEP 19, 2009"},
{"dataIndex":"17OCT2009","header":"OCT 17, 2009"},
{"dataIndex":"15JAN2010","header":"JAN 15, 2010"},
{"dataIndex":"17APR2010","header":"APR 17, 2010"},
{"dataIndex":"22JAN2011","header":"JAN 22, 2011"},
{"dataIndex":"21JAN2012","header":"JAN 21, 2012"}
]
},
"data":[
{"k":"170.00","19SEP2009":"a","17OCT2009":"a","15JAN2010":"a","17APR2010":"a","22JAN2011":"a"},
{"k":"175.00","19SEP2009":"a","17OCT2009":"a","15JAN2010":"a","17APR2010":"a","22JAN2011":"a"},
{"k":"180.00","19SEP2009":"a","17OCT2009":"a","15JAN2010":"a","17APR2010":"a","22JAN2011":"a"},
{"k":"185.00","19SEP2009":"a","17OCT2009":"a","15JAN2010":"a","17APR2010":"a","22JAN2011":"a"}
]
}
This is the JsonStore:



callsStore = new Ext.data.JsonStore({
url: '/bin/php/do/optionsmatrix.do.php',
storeId: 'myStore',
root: 'data',
reader: new Ext.data.JsonReader(),
autoLoad: true,
listeners: {
metachange: function(store, meta) {
alert('a');
Ext.getCmp('calls').getColumnModel().setConfig(meta.colModel);
}
}
});
This is the GridPanel:



var callsGrid = new Ext.grid.GridPanel({
height: 400,
width: 800,
frame: true,
border: true,
title: 'Call Options for SYMBOL',
store: callsStore,
colModel: colModel,
loadMask: false,
//stripeRows: true,
listeners: {
render: {
fn: function(){
callsStore.load({
params: {
// calls or puts
r: 'c',
// ticker
t: 'GS',
// low ticker
srl: 170,
// high ticker
srh: 185
}
});
}
}
},
tbar: ['-', {
text:'Analyze Trade',
tooltip:'Analyze trade with selected positions',
handler: analyzeTrade
//iconCls:'add'
}, '-', {
text:'Clear All Trades',
tooltip:'Blah blah blah blaht',
handler: clearTrades
//iconCls:'option'
}, '-', {
text:'Volatility Skew',
tooltip:'Blah blah blah blaht',
handler: buttonPress
//iconCls:'option'
}, '-', {
text:'Sentiment Charts',
tooltip:'Blah blah blah blaht'
//iconCls:'option'
}, '-', {
text:'Volatility Charts',
tooltip:'Blah blah blah blaht'
//iconCls:'option'
}, '-', {
text:'Trade Breakeven and ROI',
tooltip:'Blah blah blah blaht'
//iconCls:'option'
}, '-']
/*
bbar: new Ext.PagingToolbar({
store: store,
pageSize: 50,
//plugins: [filters]
})
*/
});
When the metaChange event fires, the alert pops up so I know that works. However, the columnModel does not change. How do I define the column model in the grid to begin with?

BitPoet
13 Oct 2009, 7:57 AM
Assing your callsGrid an id of 'calls' and it should work like a charm, it does here with the code above (and taking out unavailable things like the button handlers). Btw., you don't need to explicitely assign a JsonReader to your store, JsonStore creates it by default.

hendricd
13 Oct 2009, 8:30 AM
Just missing one final step ;)


listeners: {
metachange: function(store, meta) {
alert('a');
var G = Ext.getCmp('calls'), CM = G.getColumnModel();
CM.setConfig(meta.colModel);
G.reconfigure(store,CM);
}
}

strimp099
13 Oct 2009, 8:51 AM
It works, thanks a ton. Given it took me about three weeks, I'll post the code for others.

JsonStore:


callsStore = new Ext.data.JsonStore({
url: '/bin/php/do/optionsmatrix.do.php',
storeId: 'myStore',
root: 'data',
listeners: {
metachange: function(store, meta) {
var g = Ext.getCmp('callsGrid')
var cm = g.getColumnModel();
cm.setConfig(meta.colModel);
g.reconfigure(store, cm);
}
}
});


ColumnModel:


colModel = new Ext.grid.ColumnModel({
defaults: {
align: 'left',
risizable: false,
sortable: false,
width: 150
}
});


GridPanel:


var callsGrid = new Ext.grid.GridPanel({
id: 'callsGrid',
height: 400,
width: 800,
frame: true,
border: true,
title: 'Call Options for SYMBOL',
store: callsStore,
colModel: colModel,
loadMask: false,
//stripeRows: true,
listeners: {
render: {
fn: function(){
callsStore.load({
params: {
// calls or puts
r: 'c',
// ticker
t: 'GS',
// low ticker
srl: 170,
// high ticker
srh: 185
}
});
}
}
}
});


Then of course I have a DIV element with id="calls" and I call the following to render:


callsGrid.render('calls');


The JSON from the server looks like this:



{
"metaData":{
"root":"data",
"fields":["k","19SEP2009","17OCT2009","15JAN2010","17APR2010","22JAN2011","21JAN2012"],
"colModel":[
{"dataIndex":"k","header":"<strong>Strikes<\/strong>","width":50},
{"dataIndex":"19SEP2009","header":"SEP 19, 2009"},
{"dataIndex":"17OCT2009","header":"OCT 17, 2009"},
{"dataIndex":"15JAN2010","header":"JAN 15, 2010"},
{"dataIndex":"17APR2010","header":"APR 17, 2010"},
{"dataIndex":"22JAN2011","header":"JAN 22, 2011"},
{"dataIndex":"21JAN2012","header":"JAN 21, 2012"}
]
},
"data":[
{
"k":"<div class=\"matrixCell strike\"><strong>170.00<\/strong><\/div>",
"19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
},{
"k":"<div class=\"matrixCell strike\"><strong>175.00<\/strong><\/div>",
"19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
},{
"k":"<div class=\"matrixCell strike\"><strong>180.00<\/strong><\/div>",
"19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
},{
"k":"<div class=\"matrixCell strike\"><strong>185.00<\/strong><\/div>",
"19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
}
]
}

Thanks again.

scblue
28 Feb 2010, 7:31 PM
Hi,

I tried this but the grid does not render anything.

I put the grid in a Panel.

Thanks,

Edit:

Nvm, Got it to work ;)
Thanks for the codes.

PCSpectra
11 Mar 2011, 6:47 AM
This is driving me crazy I have tried about 4 different threads examples removed all clutter and still nothing works, please help me figure out what I am missing:

This is the index.php page that loade ExtJS:


new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items:
[
{
region: 'center',
layout: 'fit',
items: showGridResults()
}
]
});


I define the showGridResults() in a grid.js file shown below:



function showGridResults()
{
var callsStore = new Ext.data.JsonStore({
url: 'test.php',
//storeId: 'myStore',
root: 'data',
listeners: {
metachange: function(store, meta) {
var g = Ext.getCmp('callsGrid')
var cm = g.getColumnModel();
cm.setConfig(meta.colModel);
g.reconfigure(store, cm);
}
}
});
var colModel = new Ext.grid.ColumnModel({
defaults: {align: 'left', resizable: false, sortable: false, width: 150}
});
var callsGrid = new Ext.grid.GridPanel({
id: 'callsGrid',
height: 400,
width: 800,
store: callsStore,
colModel: colModel,
loadMask: true,
listeners: {
render: {
fn: function(){
callsStore.load({params: {r: 'c', t: 'GS', srl: 170, srh: 185}});
}
}
}
});
return callsGrid;
}


Finally I have the data file which I copied directly from the above example:



<?php
$buff = '{
"metaData":{
"root":"data",
"fields":["k","19SEP2009","17OCT2009","15JAN2010","17APR2010","22JAN2011","21JAN2012"],
"colModel":[
{"dataIndex":"k","header":"<strong>Strikes<\/strong>","width":50},
{"dataIndex":"19SEP2009","header":"SEP 19, 2009"},
{"dataIndex":"17OCT2009","header":"OCT 17, 2009"},
{"dataIndex":"15JAN2010","header":"JAN 15, 2010"},
{"dataIndex":"17APR2010","header":"APR 17, 2010"},
{"dataIndex":"22JAN2011","header":"JAN 22, 2011"},
{"dataIndex":"21JAN2012","header":"JAN 21, 2012"}
]
},
"data":[
{
"k":"<div class=\"matrixCell strike\"><strong>170.00<\/strong><\/div>",
"19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
},{
"k":"<div class=\"matrixCell strike\"><strong>175.00<\/strong><\/div>",
"19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
},{
"k":"<div class=\"matrixCell strike\"><strong>180.00<\/strong><\/div>",
"19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
},{
"k":"<div class=\"matrixCell strike\"><strong>185.00<\/strong><\/div>",
"19SEP2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17OCT2009":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"15JAN2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"17APR2010":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>",
"22JAN2011":"<span class=\"matrixItem type\" title=\"Option Type\">call<\/span>"
}
]
}';
header('Content-Type: application/json');
echo $buff;


I am getting nothing in my result window except for the quick flash of the loadMask

I am running Ext 3.2.1

Cheers,
Alex

fay
11 Mar 2011, 8:32 AM
Alex,

I've just tried your code with Ext JS 3.2.1 (and 3.3.1) on IE 8 and FF 3.6.15 (with IIS 7) and it works fine. Are you sure that your PHP is configured correctly? What does Firebug report?