日期:2014-05-16 浏览次数:20377 次
关键对象:
Ext.data.HttpProxy 创建访问服务端的代理
Ext.data.JsonReader 创建读取器
Ext.data.Store 数据存储器
Ext.grid.ColumnModel gridPanel呈现时,显示的列集合
Ext.PagingToolbar gridPanel分页
Ext.grid.GridPanel 数据呈现
var proxy = new Ext.data.HttpProxy({
url:'yourserverurl.ashx?action=get',
method:'GET'
});
var readerOption = {root:'Data',totalProperty:'TotalRecord',id:'ID'};
var product = Ext.data.Record.create([
{name:'ID',mapping:'ID'},//name:js下对象属性名称,mapping:对应服务器端属性名称
{name:'Name'}
]);
var reader = new Ext.data.JsonReader(
readerOption,
product
);
var store = new Ext.data.Store({
proxy:proxy,
reader:reader,
remoteSort:false//用于客户端排序[点击列头时升序/倒序]
});
var cm = new Ext.grid.ColumnModel({
columns:[
{header:'序号',tooltip:'提示序号',align:'right',width:40,dataIndex:'ID'},
{header:'产品名称',tooltip:'XX产品名称',align:'left',width:100,dataIndex:'Name'}//注意此dataIndex要与product中的name对应,且却分大小写
],
defaults:{sortable:false}//不允许客户端点击列头排序,可以打开s
});
//cm用于显示gridpanel时的列呈现
var pageBar = new Ext.PagingToolbar({
pageSize:25,
store:store,
displayInfo:true,
displayMsg:'总记录数{0}-{1}of{2}',
emptyMsg:'没有记录'
});
var grid = new Ext.grid.GridPanel({
store:store,
renderTo:'div_grid',//html页面上面必须要有以此div_grid为id的标签
cm:cm,
columnLines:true,
frame:true,
autoScroll:true,
loadMask:true,
autoExpandColumn:'Position',
height:500,
width:800,
stripeRows:true//相邻两行背景色不同
});
grid.store.on('load',function(){});//在服务器数据获取后,呈现之前自行处理结果集[比如,增加合计]
grid.loadMask.msg='加载中...';
grid.load({params:{start:0,limit:25},callback:overLoad});//callback用于在数据加载完成后处理页面的按钮状态,或其他业务需求。如果无其他需求可以去掉callback
grid.load({params:{start:0,limit:25}});
以上解释属个人理解,如有不妥,望指正。