extjs 4.2 分页和根据查询条件分页 废话不多说直接上代码:
Ext.onReady(getPageList);
function getPageList(){
//取得屏幕高度
var BodyH = document.documentElement.clientHeight;
var store;
//model
Ext.define('Bussiness', {
extend: 'Ext.data.Model',
fields: [
{name: 'docCode', type:'string'},
{name: 'serialNumber', type: 'string'},
{name: 'busiType', type: 'string'},
{name: 'formId', type: 'int'},
{name: 'docDate', type: 'string'},
{name: 'channelId', type: 'string'},
{name: 'sdorgId', type: 'string'},
{name: 'aeraId', type: 'string'},
{name: 'comboCode', type: 'string'},
{name: 'packageId', type: 'string'},
{name: 'seriesNumber', type: 'string'},
{name: 'docStatus', type: 'int'}
]
});
//jsonStore
store =Ext.create('Ext.data.Store',{
model: 'Bussiness',
pageSize:10,
proxy:{
type: 'ajax',
url:'bussinessInfo_list.action',
reader:{
type:'json',
totalProperty:'recordCount', //总记录数
root:'recordList' //json数据
}
}
});
//点击下一页时传递搜索框值到后台
store.on('beforeload', function (store, options) {
var keyWord=Ext.getCmp('KeyWord').getValue();
var new_params = { searchText:keyWord };
Ext.apply(store.proxy.extraParams, new_params);
});
var grid=Ext.create('Ext.grid.GridPanel', {
//title: '业务信息',
store: store,
id:'myGridPanel',
forceFit : true,
frame: true,
//顶部工具栏 查询输入框
tbar: [{
xtype:'label',text:'请输入关键词:'
},
{
xtype:'textfield',id:'KeyWord'
},
{
text:'搜索',handler:function(){
//点击搜索按钮将查询条件传递到后台
var keyWord=Ext.getCmp('KeyWord').getValue();
store.load({params:{start:0,limit:10,foo:'bar',searchText:keyWord}});
}
}
],
columns: [
{header:'订单号',dataIndex:'docCode'},
{header:'流水号',dataIndex:'serialNumber'},
{header:'业务类型',dataIndex:'busiType'},
{header:'业务功能号',dataIndex:'formId'},
{header:'业务时间',dataIndex:'docDate',renderer:function(value){
return new Date(parseInt(value)).toLocaleString().substr(0,19);
}},
{header:'渠道信息',dataIndex:'channelId'},
{header:'部门信息',dataIndex:'sdorgId'},
{header:'区域信息',dataIndex:'aeraId'},
{header:'套餐信息',dataIndex:'comboCode'},
{header:'政策信息',dataIndex:'packageId'},
{header:'受理号码',dataIndex:'seriesNumber'},
{header:'订单状态',dataIndex:'docStatus',renderer:function(value){
switch(value){
case 1: return "已经成功生成销售定单" ;
break;
case 2: return "生成失败" ;
break;
default: return "" ;
break;
}
}}
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // GridPanel中使用的数据
dock: 'bottom',
displayInfo: true,
emptyMsg:"没有数据",
height:BodyH+160,
displayMsg:"显示从{0}条数据到{1}条数据,共{2}条数据",
store:store
}],
renderTo: Ext.getBody(),
listeners: {
itemdblclick: this.handlePanelClick
}
});
var keyWord=Ext.getCmp('KeyWord').getValue();
store.load({params:{start:0,limit:10,foo:'bar',searchText:keyWord}});
}
//当gridpanel列表被点击时调用
function handlePanelClick(grid, rowIndex, e){
var docCode=rowIndex.data.docCode;
var status=rowIndex.data.docStatus;
window.location.href="bussinessInfo_detailes.action?docCode="+docCode+"&docstatus="+status;
}