近来写前端ExtJs代码时,出现了这样一个问题,之前做的grid查询数据少,未对其grid进行翻页,假如数据较多,grid需要翻页显示时,按条件查询出的结果就不能正常的按页显示,而出现了当使用grid自带的翻页按钮时,第二页回重置查询条件,使得查询条件无效化,针对这种情况,本人在网上找到一些方法,这里选取了其中一种较为比较简便的方法,如下
先列出grid的自带翻页控件
bbar : [{
xtype : 'paging',
pageSize : 20,
store : exampleStore,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg : "没有记录"
}]
这里将每页数量定为20,然后列出store
var exampleStore = new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({
url : ‘...'
}),
root : 'list',
totalProperty : 'totalProperty',
fields : []
// autoLoad : false
});
exampleStore.load({
params : {
start : 0,
limit : 20
}
});
查询时的function
buttons : [{
text : '查询',
iconCls : 'icon-accept',
cls : 'right-part',
handler : function() {
exampleStore.proxy = new Ext.data.HttpProxy({
url : 'employmentselfApply_selectEmploymentSelf.action'
});
exampleStore.load({
params : {
start : 0,
limit : 20,
'name' : Ext.getCmp('name').getValue(),
'year' : Ext.getCmp('year').getValue(),
'department' : Ext.getCmp('department').getValue(),
'major' : Ext.getCmp('major').getValue()
}
});
}
}, '-', {
text : '重置',
iconCls : 'icon-reset',
handler : function() {
selectForm.form.reset();
},
cls : 'right-part'// ,
}]
这里查询条件有name,year,department和major
方法是,加上下段代码
exampleStore.on('beforeload',function(){
exampleStore.baseParams = {
'name' : Ext.getCmp('name').getValue(),
'year' : Ext.getCmp('year').getValue(),
'department' : Ext.getCmp('department').getValue(),
'major' : Ext.getCmp('major').getValue()
}
});
此段代码表示的意思是,在store每次加载之前,执行下面一个方法,即赋值基本参数,这些参数将以隐藏的方式传到后台,这样的话,就能实现带参数的自动翻页功能了,但是要注意的是,此段代码必须写在查询代码之后,否则,会报找不到对象的错,因为Ext.getCmp中的值必须要先进行定义。