how data in grouping grid will be shown - extjs

Question

I am using this article of architecture http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
Here is my Application.ResellerGrid.js
Application.ResellerGrid = Ext.extend(Ext.grid.GridPanel, {
border:false
,cityname : ''
,columndataindex : ''
,fromdate:''
,todate : ''
,initComponent:function() {
var config = {
store:new Ext.data.GroupingStore({
// store configs
autoDestroy: true,
autoLoad :false,
url: 'api/index.php?_command=getresellers&city='+this.cityname+'&columndataindex='+this.columndataindex
+'&fromdate='+this.fromdate+'&todate='+this.todate
,
storeId: 'getresellerscount',
// reader configs
root: 'reseller',
idProperty: 'mobile',
fields: [
{name: 'parentname'},
{name: 'firstname'},
{name: 'lastname'},
{name: 'mobile'},
{name: 'email'},
{name: 'tmecode'},
{name: 'tmename'},
{name: 'updatedon'},
{name: 'apptype'},
{name: 'alloctype'},
{name: 'empparent'},
{name: 'irodeferred'}
]
,sortInfo:{field: 'parentname', direction: "ASC"}
,groupField:'parentname'
})
,columns: [
{
id :'parentname',
header : 'Parent Name',
width : 120,
sortable : true,
dataIndex: 'parentname'
},
{
id :'firstname',
header : 'First Name',
width : 120,
sortable : true,
dataIndex: 'firstname'
},
{
id :'lastname',
header : ' Last Name',
width : 100,
sortable : true,
dataIndex: 'lastname'
},
{
id :'mobile',
header : 'Mobile',
height : 50,
width : 100,
sortable : true,
dataIndex: 'mobile'
},
{
id :'email',
header : 'E-Mail',
width : 100,
sortable : true,
dataIndex: 'email'
},
{
id :'tmecode',
header : ' TME Code',
width : 100,
sortable : true,
dataIndex : 'tmecode'
},
{
id :'updatedon',
header : ' updatedon',
width : 100,
sortable : true,
dataIndex: 'updatedon'
},
{
id :'empparent',
header : ' empparent',
width : 100,
sortable : true,
dataIndex: 'empparent'
},
{
id :'alloctype',
header : ' alloctype',
width : 100,
sortable : true,
dataIndex: 'alloctype'
},
{
id :'apptype',
header : ' apptype',
width : 100,
sortable : true,
dataIndex: 'apptype'
}
]
,view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
,plugins :[]
,viewConfig :{forceFit:true}
,tbar :[]
,bbar :[]
,height : 250
,width : 860
,title : 'Reseller Grid'
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.ResellerGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function() {
this.store.load();
Application.ResellerGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('ResellerGrid', Application.ResellerGrid);
Here is my json response
{
"reseller": [{
"firstname": "anusha",
"lastname": "",
"mobile": "9739949891",
"email": "",
"tmecode": "010739",
"tmename": "Deepa S",
"updatedon": "2011-03-18 13:17:22",
"apptype": "1",
"alloctype": "2",
"empparent": "Bangalore",
"parentname": "HEMARLI"
}, {
"firstname": "IBRAZ",
"lastname": "",
"mobile": "9740834768",
"email": "",
"tmecode": "010739",
"tmename": "Deepa S",
"updatedon": "2011-03-18 17:52:04",
"apptype": "1",
"alloctype": "2",
"empparent": "Bangalore",
"parentname": "HEMARLI"
}, {
"firstname": "manjunath",
"lastname": "",
"mobile": "7829407211",
"email": "umesthrekha29#yahoo.com",
"tmecode": "012574",
"tmename": "Geetha S",
"updatedon": "2011-03-19 17:12:17",
"apptype": "1",
"alloctype": "2",
"empparent": "Bangalore",
"parentname": "HEMARLI"
}]
}
data in my grid is not showing why ?

Answer 1

Done by adding jsonreader , grouping store doesn't work without jsonreader .