我正在使用这篇架构文章http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
这是我的网格文件
Application.DashBoardGrid = Ext.extend(Ext.grid.GridPanel, {
border:false
,fromdate:''
,todate : ''
,initComponent:function() {
var store =new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellerscount&fromdate='+this.fromdate+'&todate='+this.todate,
storeId: 'getresellerscount',
// reader configs
root: 'cityarray',
idProperty: 'cityname',
fields: [
{name: 'cityname'},
{name: 'totfollowup'},
{name: 'totcallback'},
{name: 'totnotintrested'},
{name: 'totdealsclosed'},
{name: 'totcallsreceived'},
{name: 'totcallsentered'},
{name: 'totresellerregistered'},
{name: 'countiro'},
{name: 'irotransferred'},
{name: 'irodeferred'}
]
});
console.log(store);
var config = {
store:store
,columns: [
{
id :'cityname',
header : 'City Name',
width : 120,
sortable : true,
dataIndex: 'cityname'
},
{
id :'countiro',
header : ' Total Prospect',
width : 100,
sortable : true,
dataIndex: 'countiro'
,renderer : this.linkiroRenderer
},
{
id :'irotransferred',
header : 'Calls Transfered By IRO',
height : 50,
width : 100,
sortable : true,
dataIndex: 'irotransferred'
,renderer : this.linkiroRenderer
},
{
id :'irodeferred',
header : ' Calls Deferred By IRO',
width : 100,
sortable : true,
dataIndex: 'irodeferred'
,renderer : this.linkiroRenderer
},
{
id :'totcallsentered',
header : ' Total Calls Entered',
width : 100,
sortable : true,
dataIndex : 'totcallsentered',
renderer : this.linkRenderer
},
{
id :'totfollowup',
header : ' Follow Up',
width : 100,
sortable : true,
dataIndex: 'totfollowup',
renderer : this.linkRenderer
},
{
id :'totcallback',
header : ' Call Backs',
width : 100,
sortable : true,
dataIndex: 'totcallback',
renderer : this.linkRenderer
},
{
id :'totnotintrested',
header : ' Not Interested',
width : 100,
sortable : true,
dataIndex: 'totnotintrested',
renderer : this.linkRenderer
},
{
id :'totdealsclosed',
header : ' Deals Closed',
width : 100,
sortable : true,
dataIndex: 'totdealsclosed',
renderer : this.linkRenderer
},
{
id :'totresellerregistered',
header : ' Reseller Registered',
width : 100,
sortable : true,
dataIndex: 'totresellerregistered',
renderer : this.linkRenderer
}
]
,plugins :[]
,viewConfig :{forceFit:true}
,tbar :[]
,bbar :[]
,height : 350
,width : 1060
,title : 'Reseller Dashboard'
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.DashBoardGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
/**
* It is the renderer of the links of cell
* @param data value of cell
* @param record object of data has all the data of store and record.id is unique
**/
,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
var tag={
tag: 'a',
href: '#',
html: data//,
// onclick: this.resellerWindow(record.data.cityname,cell.id)
};
if (data != null) {
return '<a href="javascript:void(0)" onclick="resellerwindow(\'' +record.data.cityname+'\',\''+cell.id+'\',\''+this.header+'\')">'+ data +'</a>';
}
return data;
}
/**
* It is the renderer of the links iro's column of cell
* @param data value of cell
* @param record object of data has all the data of store and record.id is unique
**/
,linkiroRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
// console.log(this.header);
if (data != null) {
return '<a href="javascript:void(0)" onclick="resellerirowindow(\'' +record.data.cityname+'\',\''+cell.id+'\',\''+this.header+'\')">'+ data +'</a>';
}
return data;
}
,resellerwindow : function (cityname,columndataindex) {
var win = new Ext.Window({
items:{
xtype : 'ResellerGrid',
'cityname' : cityname,
'columndataindex' : columndataindex
}
});
win.show();
}
,onRender:function() {
// this.store.load();
Application.DashBoardGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('DashBoardGrid', Application.DashBoardGrid);
这是我的json返回
{
"countothercities": "1",
"directreseller": "24",
"totalresellersregisteredfor8cities": 23,
"cityarray": [{
"cityname": "bangalore",
"totfollowup": "2",
"totcallback": "3",
"totnotintrested": "1",
"totdealsclosed": "0",
"totcallsreceived": "0",
"totcallsentered": "88",
"totresellerregistered": "4",
"countiro": "156",
"irotransferred": "130",
"irodeferred": "26"
}
}
我如何展示
“countothercities”：“1”， “直销商”：“24”， “totalresellersregisteredfor8cities”：23，
网格下方？答案 0 :(得分：0)
您可以通过
访问此数据var countothercities = grid.getStore().reader.jsonData.countothercities;
var directreseller = grid.getStore().reader.jsonData.directreseller;
var totalresellersregisteredfor8cities = grid.getStore().reader.jsonData. totalresellersregisteredfor8cities;
如何输出这些数据在很大程度上取决于您的用户界面。
要在加载商店时抓住这些数据，您可能应该在商店的load - 事件中添加一个事件监听器，例如：将其添加到您的initComponent()方法：
store.on('load', function(s) {
var countothercities = s.reader.jsonData.countothercities;
var directreseller = s.reader.jsonData.directreseller;
var totalresellersregisteredfor8cities = s.reader.jsonData. totalresellersregisteredfor8cities;
}, this);
现在你可以用你的三个变量做任何你想做的事。
修改
要将数据添加到网格的底部工具栏，请将行,bbar :[]更改为
,bbar: [{
xtype: 'tbtext',
ref: 'status',
text: ''
}]
这会在您的底栏添加一个空的Ext.Toolbar.TextItem。
store.on('load', function(s) {
var countothercities = s.reader.jsonData.countothercities;
var directreseller = s.reader.jsonData.directreseller;
var totalresellersregisteredfor8cities = s.reader.jsonData. totalresellersregisteredfor8cities;
this.getBottomToolbar().status.setText(String.format('{0}, {1}, {2}',
countothercities,
directreseller,
totalresellersregisteredfor8cities
));
}, this);