CODEWITHSUNDEEP
jsonextjs
El Guapo
El Guapo

Reputation: 5781

Ext JS JSON Grid Grouping

I have the following JSON which I need to group inside of a Ext JS 4 Grid: 

{
root: {
    type: 'viewer',
    people: ['person a', 'person b', 'person c']
},
{
    type: 'editor',
    people: ['person c', 'person d']
}
}

I have absolutely no idea where to start to represent this data in an ExtJS Grid.

But, here is what I have so far:

var myModel = Ext.create('Ext.data.Model', {
    fields: ['type', 'people']
})

var myStore = Ext.create('Ext.data.Store' , {
    data: (JSON above),
    model: myModel,
    groupField: 'type',
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'root'
        }
    }
});

var myGrid = Ext.create('Ext.grid.Panel', {
    store: myStore,
    columns: [
        {header: 'Name', dataIndex: 'people'}
    ]
})

.... other code to display the grid

I get a grid to show, but it doesn't group and there isn't any data showing inside of the grid.

For some reason I think I need a more elaborate Model, however, since the "people" object is just an array of strings, I don't know how tell the column definition which dataIndex it is.

Any help is very much appreciated.

Thanks.

Upvotes: 1

Views: 4413

Answers (1)

CD..
CD..

Reputation: 74096

You should be using the grouping feature on the grid.

This feature allows to display the grid rows aggregated into groups as specified by the Ext.data.Store.groupers specified on the Store. The group will show the title for the group name and then the appropriate records for the group underneath. The groups can also be expanded and collapsed.

Upvotes: 3

Related Questions