Question

I am having trouble figuring out what I need to do to load the columns for an ExtJS grid dynamically. I want to be able to send the column headers as JSON and have the grid take that and generate the columns needed.

More specifically, I am wanting to do this using the GroupingHeader plugin, but I really just want to figure out how to do it without the added complexity of the GroupingHeader plugin first and then I can tackle that problem 🙂

Here is some sample JSON data that I have for the column headers:

[
    {
        "run_id":"110207gad",
        "iterations":[
            "1_14",
            "2_16",
            "3_18",
            "4_20",
            "5_22"
        ]
    },{
        "run_id":"110207gae",
        "iterations":[
            "1_14",
            "2_16",
            "3_18",
            "4_20",
            "5_22"
        ]
    }
]

This is the data that I would need to do the grouping, where the run_id would be the grouped header and the iterations would be the column headers. Right now, I’m happy just getting the iterations to show up as columns and then I can work on getting the grouping to work.

If anyone could point me in the right direction or give me some hints on where to begin, that would be extremely helpful! I’m not beyond figuring this out on my own, but I just need a little bump to get started because I can’t seem to figure out from looking at the ExtJS examples and doing some Google searches.

Answer 1

I suggest you look at the source code of the ExtJS example.

http://dev.sencha.com/deploy/dev/examples/grid/array-grid.js

It should give you a fair amount of information to get started.

You can start from this format, pass it from your server:

{"success":true,"message":"Loaded data","data":[{"run_id":1,"iterations":"1"},{"run_id":2,"iterations":"2"},{"run_id":3,"iterations":"3"}]}

Then your reader will look like this:

var reader = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    idProperty: 'run_id',
    root: 'data',
    messageProperty: 'message'  
}, [
    {name: 'run_id'},
    {name: 'iterations', allowBlank: false}
]);