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();