extjs4学习笔记（二）----- 监听事件beforeload使用

最新推荐文章于 2021-02-06 18:44:00 发布

yfcaone

最新推荐文章于 2021-02-06 18:44:00 发布

阅读量9.9k

点赞数 1

分类专栏： extjs 文章标签： extjs4

本文链接：https://blog.csdn.net/yfcaone/article/details/62238478

版权

extjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了EXTJS4中Store的beforeload事件，该事件在数据请求发出前触发，若返回false则取消请求。通过监听beforeload，可实现Grid的参数查询和动态分页功能，允许在加载数据前根据条件注入参数，以达到灵活过滤和分页显示的效果。

摘要由CSDN通过智能技术生成

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);  
        });