zoukankan      html  css  js  c++  java
  • 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,
      ...
    })
  • 相关阅读:
    Spring的AOP深入理解
    枚举和注解学习笔记
    单例模式
    工厂设计模式
    网络编程
    多线程笔记
    IOI2021集训队作业
    计蒜客 mark
    51nod mark
    关于此博客
  • 原文地址:https://www.cnblogs.com/fengziblog/p/10607822.html
Copyright © 2011-2022 走看看