如何在 beforeload 事件中获取 Extjs 4 商店的请求数据？

Question

我正在尝试在商店加载事件之前获取请求数据参数。我可以看到操作对象包含请求数据，但我似乎无法从操作对象

Ext.create('Ext.data.Store', {
    autoLoad : true,
    fields   : [
        {name: 'item_code',             type: 'string'},
        {name: 'quantity',              type: 'int'},
        {name: 'description',           type: 'string'}
    ],
    storeId  : 'summary',
    proxy    : {
        type            : 'ajax',
        actionMethods   : 'POST',
        extraParams     : {'filter': 'branch', 'branch': location },        
        url             : 'reports/stock_summary',
        reader: {
            type    : 'json',
            root    : 'data'
        }
    },
    listeners: {
        beforeload: function(store, operation, options){
            console.log( operation )
        }
    }
});

获取它，不知道如何在加载事件之前获取请求对象并获取该请求对象内部的数据？

Answer 1

代理发出请求并拥有所有相关的请求数据。您可以重写 Ext Ajax 代理的 doRequest 方法。执行此操作的正确方法是创建一个新的自定义代理，但为了简洁起见，此处更新了示例以覆盖代理中的 doRequest。然后，您可以触发一个事件，将您想要的数据传递给绑定到新事件的任何内容，或者您​​可以在 console.log 当前所在的位置内联编写逻辑，如本示例所示。

    Ext.create('Ext.data.Store', {
        autoLoad : true,
        fields   : [
            {name: 'item_code',             type: 'string'},
            {name: 'quantity',              type: 'int'},
            {name: 'description',           type: 'string'}
        ],
        storeId  : 'summary',
        proxy    : {
            type            : 'ajax',
            actionMethods   : 'POST',
            extraParams     : {'filter': 'branch', 'branch': location },        
            url             : 'reports/stock_summary',
            reader: {
                type    : 'json',
                root    : 'data'
            },
            /*
            * override Ext Ajax Proxy doRequest method
            * must be maintained when Ext library is updated in the app
            */
            doRequest: function(operation, callback, scope) {
                var writer  = this.getWriter(),
                    request = this.buildRequest(operation, callback, scope);

                if (operation.allowWrite()) {
                    request = writer.write(request);
                }

                Ext.apply(request, {
                    headers       : this.headers,
                    timeout       : this.timeout,
                    scope         : this,
                    callback      : this.createRequestCallback(request, operation, callback, scope),
                    method        : this.getMethod(request),
                    disableCaching: false // explicitly set it to false, ServerProxy handles caching
                });

                /*
                * do anything needed with the request object
                */
                console.log('request', request);
                console.log('request.params', request.params);

                Ext.Ajax.request(request);

                return request;
            }
        }});

Answer 2

如何尝试 operation.request.params

我认为这可以帮助你......

var test = Ext.create('Ext.data.Store', {
        autoLoad : true,
        fields   : [
            {name: 'item_code',             type: 'string'},
            {name: 'quantity',              type: 'int'},
            {name: 'description',           type: 'string'}
        ],
        storeId  : 'summary',
        proxy    : {
            type            : 'ajax',
            actionMethods   : 'POST',
            extraParams     : {'filter': 'branch', 'branch': location },        
            url             : 'reports/stock_summary',
            reader: {
                type    : 'json',
                root    : 'data'
            }
        },
        listeners: {
            beforeload: function(store, operation, options){
                console.log( 'manual load ' + operation.params );
                console.log( operation.params );
                console.log( 'proxy defined params ' + store.proxy.extraParams );
                console.log( store.proxy.extraParams )
            }
        }
    });

    test.load({params: {test: '123'}});

Answer 3

不能代表 extjs4，但在之前项目的 extjs3 中，我必须抑制并覆盖 ext 中的函数。

(function(){
  var originalFn = path.to.functionNAme
  path.to.functionName = function(...) {
    //frob data here
    originalFn(...);
  }
})

这不是最好的答案，因为我没有该代码库，大约 2 年前在另一项工作中。