Extjs 解决grid分页bug问题
//从后端获取数据加载到grid中
var mainStore = new HeJsonStore({ url:'xxx', autoLoad:true, pageSize:20 })
//此方法最好放到通用js里面 function HeJsonStore(options){ var storeOpts={}; Ext.apply(storeOpts,options); storOpts.poxy={ type:'ajax', url:options.url, actionMethods:{read:'GET'}, reader:{ type:'json', rootProperty:'dataList', totalProperty:'count' }, listeners:{ exception:function(data,type,action,options,response,arg){ Msg.error({msg:Ext.util.JSON.decode(type.responseText).msg}); } } }; if(!storeOpts.fields){ storeOpts.fields=[]; } return Ext.create('Ext.data.JsonStore',storeOpts); }
var searchForm = Ext.create('Ext.form.Panel',{
...
items:[
... //输入框组件
{
xtype:'button',//查询按钮
...
handler:function(){
//问题所在!
/**如果这里 直接把searchForm输入框的值取出来,然后
*mainStore.reload({params:params}); 当用户点击下一页之后再来点击查询,
*得到的数据就不对,会把下一页的页面数据传到后台,也就查询下一页的数据
*所以不在这里获取输入框数据
*而是在mainStore加载前就获取,然后再加载第一页数据就好
*/
mainStore.loadPage(1);
}
}
]
});
mainStore.on('beforeload',function(){
var params={};
searchForm.getForm.getFields().each(funciton(item){
var name = item.getName();
var value= item.getValue();
if(value){
params[name]=(item.getXType()=='dateField') ? item.getRawValue() : value;
}
});
mainStore.getProxy().setExtraParams(params);
});
var grid = Ext.create('Ext.grid.Panel'{
...
store:mainStore,
...
})