extjs4学习笔记(二)----- 监听事件beforeload使用

EXTJS4 store 监听事件beforeload使用(grid带参数,查询,分页)

最近看store发现一个方法–beforload,官网定义

在一个新数据对象请求发出前触发此事件. 如果beforeload的处理函数返回’false’, 数据请求将被取消.

Store注册beforeload监听事件重新加载grid的方法,用于条件查询 如果我们使用条件查询过滤表格中的数据,而请求的是同一个URL,只是根据传入的参数不同而得到不同结果集的情况下,我们可以使用Store的addListener方法注册一个beforeload事件,也可以使用listeners属性注册一个beforeload事件。
使用listeners请求注入参数

listeners: {  
    'beforeload': function (store, op, options) {  
    var params = { 
    startdate:Ext.getCmp('startdate').getValue(),  
    enddate:Ext.getCmp('enddate').getValue() //传递参数 
 };  
  Ext.apply(store.proxy.extraParams, params);   
         }  
  }

使用addListener请求注入参数

grid.getStore().addListener({
beforeload:function(store,records,options){
 store.baseParams = {
  query:'true',
  name:name //name为之前定义的变量
 };
}
});

beforeload还有一个重要的作用是进行分页。beforeload可以实现在创建store后每次自动加载前都需要获取查询条件的功能

var abStore = Ext.create('Ext.data.Store', {  
                autoLoad : {  
                    start : 0,  
                    limit : itemsPerPage  
                },  
                pageSize : itemsPerPage,  
                model : 'test',  
                autoLoad : true,  
                proxy : {  
                    type : 'ajax',  
                    url : path + '***',  
                    reader : {  
                        type : 'json',  
                        root : 'rows',  
                        totalProperty : 'results',  
                        idProperty : '**'  
                    }  
                }  
            });  

    //解决查询条件分页问题          
    abStore.on('beforeload', function(store, options) {  

                var apply = Ext.getCmp('applytime').getValue();  
                var end2 = Ext.getCmp('endtime').getValue();  
                var start = Ext.util.Format.date(apply, 'Y-m-d');  
                var stop = Ext.util.Format.date(end2, 'Y-m-d');  

        var new_params = {  
                applytime : start,  
                endtime : stop  
                        };  
        Ext.apply(store.proxy.extraParams, new_params);  
        });  

你可能感兴趣的:(extjs)