EXTJS 3.4 - Grouping gridpanel based on GeoExt.data.WMSCapabilitiesStore - extjs

Question

I am trying to implement grouping to the gridpanel using grouping store and grouping view.
Basically I want to modify the example given in this link;
http://api.geoext.org/1.1/examples/wms-capabilities.html
It is using Geoext web mapping library developed on extjs framework.Here GeoExt.data.WMSCapabilitiesStore is the store used for data from a url in XML.
Sample working xml can be viewed here:
url for xml
I am modifying the code to group the resulted records based on for example, 'name'.
Some how I am not able to properly configure the grouping store.
Here is my code sample:
var store;
Ext.onReady(function() {
// create a new WMS capabilities store
store = new GeoExt.data.WMSCapabilitiesStore({
url: "data.xml"
});
// load the store with records derived from the doc at the above url
store.load();
store.on('load',function(store,records,opts){
console.log(store.getRange());
}); //show the array data in firebug console
var reader = new Ext.data.ArrayReader({
fields: [{name: 'title'},
{name: 'name'},
{name: 'queryable'},
{name: 'abstract'}
]});
var grpstore = new Ext.data.GroupingStore({
data: store,
autoLoad: true,
reader: reader,
sortInfo:{field: 'title', direction: "ASC"},
groupField:'name'
});
//SP
// create a grid to display records from the store
var grid = new Ext.grid.GridPanel({
title: "WMS Capabilities",
store: grpstore,
columns: [
{header: "Title", dataIndex: "title", sortable: true},
{header: "Name", dataIndex: "name", sortable: true},
{header: "Queryable", dataIndex: "queryable", sortable: true, width: 70},
{id: "description", header: "Description", dataIndex: "abstract"}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
autoExpandColumn: "description",
listeners: {
rowdblclick: mapPreview
},
iconCls: 'icon-grid',
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}],
renderTo: "capgrid"
});
function mapPreview(grid, index) {
var record = grid.getStore().getAt(index);
var layer = record.getLayer().clone();
var win = new Ext.Window({
title: "Preview: " + record.get("title"),
width: 512,
height: 256,
layout: "fit",
items: [{
xtype: "gx_mappanel",
layers: [layer],
extent: record.get("llbbox")
}]
});
win.show();
}
});
I am getting the panel with group options in the columns but the grid is empty. I tried many options in the data input of grouping store, but could not make it work.
Is it good way to get the data from 'store' as array, and then read it again in grouping store? But I couldnt make it working.
store.getRange() is showing all the data in the firebug console, probably as an array. I tried it as per this post. How to then call this array as data in grouping store, if this is a good way of doing it.
Any lead on this would be very helpful
Thanks
Sajid

Answer 1

I was looking to do exactly the same thing. I found two things:
You can use the store.Each function to copy the data from the WMSCapabilitiesStore to the Grouping Store
This was the trouble - the loading of the store is asynchronous, so you have to use store.on to set up a callback function to populate the groupingStore once the WMSCapabilitiesStore is finished loading.
Here's the code:
store = new GeoExt.data.WMSCapabilitiesStore({
url: "data.xml"
});
store.load();
grpStore = new Ext.data.GroupingStore({
groupField: 'name',
sortInfo: {field: 'name', direction: 'ASC'},
groupOnSort: true
});
store.on('load', function(store, records, options)
{
store.each(function(eachItem) {
grpStore.add(eachItem);
});
});
var grid = new Ext.grid.GridPanel({
store: grpStore,
columns: [
{header: "Title", dataIndex: "title", sortable: true},
{header: "Name", dataIndex: "name", sortable: true},
{id: "description", header: "Description", dataIndex: "abstract"}
],
autoExpandColumn: "description",
height: 300,
width: 650,
view: new Ext.grid.GroupingView({
forcefit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
});