how to get Extjs 4 store's request data on beforeload event?

Question

I'm trying to get request data params beforeload event on store. I can see the operation object contains the request data but I can't seems to get it from operation object

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

any idea how to get request object on before load event and get data inside of that request object?

Answer 1

how to try operation.request.params

i think this could help you ...

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 2

The proxy is what makes the request and has all of the related request data. You can override the doRequest method of the Ext Ajax Proxy. The correct way to do this is to create a new custom proxy but for brevity here is your sample updated to override doRequest in the proxy. You can then fire an event that passes the data out that you want to anything bound to the new event or you can write your logic inline where the console.log current is as this example is coded.

    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 3

Can't speak for extjs4, but in extjs3 on a prior project, I had to supress and override a function in ext..

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

Not the best answer, as I don't have that codebase, was about 2 years ago on another job.