PDA

View Full Version : Dynamic Grid columns == FAIL



cwells
26 Aug 2010, 9:11 PM
I'm trying to follow the thread here that explains how to pass the ColumnModel via JSON (to have an effect similar to AutoGrid from 2.x):

http://www.sencha.com/forum/showthread.php?76406-jsonStore-gt-panel.items/page2

JSON:


{
"rows": [
{"query_count": 100, "query_date": "2010-08-24", "ani": "5551231257"},
{"query_count": 100, "query_date": "2010-08-25", "ani": "5551231257"},
{"query_count": 100, "query_date": "2010-08-26", "ani": "5551231257"}
],
"columns": [
{"header": "Date", "dataIndex": "query_date"},
{"header": "ANI", "dataIndex": "ani"},
{"header": "Dips", "dataIndex": "query_count"}
],
"metaData": {
"totalProperty": "results",
"successProperty": "success",
"root": "rows",
"fields": [
{"name": "query_date"},
{"name": "ani"},
{"name": "query_count"}
]
},
"results": 3,
"success": true
}


JavaScript:


Reports.store = new Ext.data.JsonStore ({
url: '/reports/1',
fields: [ ]
});

Reports.store.load ();

alert(Reports.store.reader.jsonData); // undefined!

Reports.grid = new Ext.grid.GridPanel ({
layout: "fit",
forceLayout: true,
height: 430,
stripeRows: true,
border: false,
bodyBorder: false,
loadMask: { msg: "Please wait..." },
store: Reports.store,
columns: [],
viewConfig: {
onDataChange: function () {
this.cm.setConfig (this.ds.reader.jsonData.columns);
this.syncFocusEl (0);
}
},
reload: function () { this.store.reload (); }
});


I note that store.reader.jsonData is "undefined", so that seems to be a problem, but I'm unclear how to resolve it. The JSON works if I define my ColumnModel the usual way, so I really don't get it.

I'm also baffled by where this.cm and this.ds are supposed to come from. All the examples refer to them, but no one defines them. I've tried using this.store in place of this.ds and explicitely defining this.cm as a ColumnModel but that didn't help.

It also doesn't help that neither Firefox+Firebug nor Chromium Inspector show any errors. Just silent failure. I did get to start smoking again after 9 months though, so that's a huge win.

cwells
27 Aug 2010, 11:47 AM
So I got what I wanted by using Ext.ux.MetaGrid which works great. Still no idea why the above doesn't work but <shrug>.

jeffcrilly
27 Aug 2010, 8:08 PM
Sounds like you got this working in alternatie way, but thought I'd just note that we did get something ~like~ this working in ext 2.x and 3.x.

The key is (if I understand the question) to use gridpanel.reconfigure() to load the new columnModel.

Basically, out app defines a placeholder columnModel that is used to initially create the grid.

The client then makes an ajax call to the server to retrieve the columnModel specific to a user-requested data-grid (where the data is stored in a DB).

When the columnModel json is received, a new columnModel is created from this json definition.
The columnModel is then given to the via gridPanel.reconfigure(). Then the grid's store is reloaded from the server with a corresponding URL.

Yes, this is a two step process... mainly because our data is sort of large so we use server side paging.
But I suspect it could be done in one step.

In 2.x there were a few glitches and we needed to delete some objects -- iirc something about the view.
However in 3.x reconfigure() is working just great.
We also use this with plugins..some of our own.

j-joey
29 Aug 2010, 7:31 AM
store's are async so when you try to get jsonData, store hasn't loaded yet. you should get the contents in a load event.