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,
  ...
})

 

你可能感兴趣的:(Extjs 解决grid分页bug问题)