Ext学习之三结果集展示到Grid
1.定义数据存储器:
var blackStore = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({
url:'$base/blacklist/getResult.o', //请求后台的URL
method:'post'
}),
reader:new Ext.data.JsonReader({ //以JSON方式读取数据, 此处的reader很容易错写成render.
root:'newList', //newList结果集的名称
totalProperty:'totalProperty' //totalProperty总记录数的名称
},[{name:'number'},{name:'source'}]
)
});
blackStore.load({params:{'start':0, 'limit':20}});//注意,要在此处调用,因为当Grid渲染到div后再调用的话,Grid将不会显示数据
blackStore.on('beforeload',function(){
Ext.apply(
this.baseParams,
{
'blacklist.number':Ext.getCmp('number').getValue(),
'blacklist.source':Ext.getCmp('source').getValue()
});
}); //在store重新加载数据时,将查询条件重新传到后台.
2.定义Grid显示的列
var blackCol = new Ext.grid.ColumnModel([
{header:'电话号码',dataIndex:'number',width:500},
{header:'号码来源',dataIndex:'source',width:300}
]);
3.定义Grid
blackCol.defaultSortable = true ; //设置列默认可排序
var blackGrid = new Ext.grid.GridPanel({//定义表格列表
el:'blackListGrid',
width:820,
defaults: {anchor:'95%'},
height:500,
title:'列表',
store:blackStore,
cm:blackCol,
loadMask:{msg:'正在加载数据,请稍候...'},
bbar:new Ext.PagingToolbar({
pageSize:20,
store:blackStore,
displayInfo:true,
displayMsg:'显示第{0} 条到第{1}条记录,一共{2}条记录',
emptyMsg:'没有记录'
})
});
blackGrid.render();