代码中包含了extjs分页,分页排序,获取json数据,extjs store 传参数到后台,加入两个工具栏,双击grid行事件
var proxy=new Ext.data.HttpProxy({url:'/test.php',method:'POST'});
var reader=new Ext.data.JsonReader({
root: 'results', //json数据的节点{results:[{}]}
// totalProperty:'total',
fields:
[ {name: 'iGameID'} ]
}) ;
var ds=new Ext.data.Store({
proxy:proxy,
reader:reader,
remoteSort:true //远程排序,grid为分页时候必须
});
ds.on('beforeload',function(){
this.baseParams={
ddlGameList:gameid,
ddlWorldList:worldid
};
});
ds.setDefaultSort('iGameID','asc'); //设置远程排序的时候,加上默认排序参数,可以想后台传入要
//排序的列sort和升序或降序dir
// ds.load({params:{start:0,limit:25,ddlGameList:gameid,ddlWorldList:worldid}});
//查看grid控件是否存在,存在就destory改控件
if(grid != undefined ) //防止页面出现多个grid 每次加载的时候都判断有无,有则删除
{
grid.destroy();
}
//grid上复选框
var mysm=new Ext.grid.CheckboxSelectionModel(); //在grid中的最前面加入复选框
grid = new Ext.grid.GridPanel({
store: ds, //数据源
id:"grid",
sm:mysm, //行中加入 复选框
columns: [
mysm, //列中加入复选框
{header: "游戏名", width: 60, dataIndex: 'vGameName', sortable: true} ], //dataIndex
//保持和数据源ds中的field的name名字一致
// autoHeight:true,
height :400,
autoScroll:true, //出现滚动条,此时高度必须设置才出来
stripeRows: true,
loadMask:true, //加载的时候出现遮罩效果
width: 1000,
title: '查询结果',
// config options for stateful behavior
stateful: true,
viewConfig:{
forceFit:true
},
tbar:{ //grid 中加入工具条
frame: true, //
items:[
{
xtype: 'button', //工具条中加入button
width: 89,
text: '修改',
x: 250,
y: 10,
region: 'west',
listeners:{
click':function(){
var gsm = (Ext.getCmp("grid")).getSelectionModel();//获取选择列
var rows = gsm.getSelections();//根据选择列获取到所有的行
if (rows.length > 0)
{
//当有选择的数据的时候
for (var i = 0; i < rows.length; i++)
{
//循环迭代所有的选择的row var rs_gamename = row.get('vGameName');//获得游戏名称
}
}
else
{
Ext.Msg.alert('提示', '请选择要修改的业务信息!');
}
}
}
}
],
listeners:{
'render':function(){ //加两个滚动条
var tbar = new Ext.PagingToolbar({
store : ds,
pageSize : 25,
displayInfo : true,
beforePageText:"第",
afterPageText:"/ {0}页",
firstText:"首页",
prevText:"上一页",
nextText:"下一页",
lastText:"尾页",
refreshText:"刷新",
displayMsg : "当前显示记录从 {0} - {1} 条 总 {2} 条记录",
emptyMsg : "没有相关记录!"
});
tbar.render(grid.tbar); //渲染到grid中的tbar
}
}
});
//行双击事件
grid.on('rowdblclick',function(grid,index,e){
//
var row = grid.store.getAt(index);//取出点击的那条记录 grid 是对象名
var rs_gamename = row.get('vGameName');//获得游戏名称
});
// render the grid to the specified div in the page
grid.render('divShow');
ds.load({params:{start:0,limit:25,ddlGameList:gameid,ddlWorldList:worldid}}); //store装载数据时候装载参数到后台
代码为前台js脚本 后台采用php实现。。。在实现分页和分页全局排序的时候,需要将前台post过去的 start ,limit ,sort,dir 四个参数加以利用。将这四个参数放到SQL查询字符串中,然后执行SQL字符串。