Override of an Ext.data.Store

[Doug Beatty]

I am trying to create an override for a JSON store, but it is not behaving as I would expect -- none of my values seem to have taken effect. Why the need for an override of the store in the first place, you ask? A few reasons:
1) Set custom headers to include some authorization information
2) Change the read method to POST instead of default of GET
3) Remove extra parameters being included by default on the URL (page, start, limit, and cache-busting variable)

For #3, you can theoretically change to "undefined" the values of pageParam, startParam, and limitParam in SA to have them not included in the URL. In my experience, this mostly worked. If you were only trying to remove one of them, it would work just fine, but when removing all of them, it left the last one as actually named "undefined" instead of not including it. Appears to be a bug to me.

When launching the code in the web browser, it looks like the Store that is being used is the generated class rather than my overridden class. Is this because the StoreManager is getting the generated one instead of the overriden one? My application entry point (app.js) does correctly display the Ext.application as requiring Cars.store.override.TestStore.

Below is an example of what my override looked like after creating it in SA. A variant works properly when hand-editing Cars.store.TestStore, but that is obviously against the principles of using Sencha Architect. I'm sure they'll be a natural way to do this in SA eventually without the need for an override in the future, but there doesn't appear to be a way currently.

Ext.define('Cars.store.override.TestStore', {
    requires: 'Cars.store.TestStore'
}, function() {
    Ext.override(Cars.store.TestStore, {
        
    extend: 'Ext.data.Store',
    requires: [
        'Cars.model.CarData'
    ],
    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            storeId: 'TestStore',
            model: 'Cars.model.CarData',
            proxy: {
                type: 'ajax',
                noCache: false,
                pageParam: '',
                startParam: '',
                limitParam: '',
                url: 'http://localhost/cars/getAllCars',
                actionMethods: {
                    read: 'POST'
                },
                headers: {
                    'Content-Type':'application/json; charset=utf-8',
                    'Authorization': 'Basic ' + Base64.encode('username:password')
                },
                params : Ext.JSON.encode(''),
                reader: {
                    type: 'json',
                    root: 'data'
                }
            }
        }, cfg)]);
    }
    });
});

[bharatn]

Hi,

Its possible you are hitting this issue
http://www.sencha.com/forum/showthre...nitComponent()

I havent investigated but have you tried to apply overrides in the beforeload event?

[ssamayoa]

Load your override manually from the html file after ext-all.

Is the way I do in my application.

Regards.

[Doug Beatty]

Another requirement that I have is to put JSON content in the body of a POST request. I was able to get this to work properly by setting the params value like below for an Ext.ajax.Request. But when trying to define my proxy in the Ext.data.Store, there was not a params value available to use. I tried setting the extraParams to be Ext.JSON.encode(myJson), but when the request was submitted my body ended up with URL-encoded info like 0={&1="&2=n&3=a&4=m&5=e&6="&7=%3A&8="&9=C&10=a&11=t&12="&13=%2C&14="&15=o&16=b&17=s&18=o&19=l&20=e&21=t&22=e&23="&24=%3A&25="&26=N&27="&28=}
instead of the JSON object desired:
{"make":"BMW","model":"M5"}


Here's the code that ended up working for me to allow getting JSON content in the BODY of a POST request that my service requires. The undesireable part is that it doesn't work natively in Sencha Architect -- I am still manually copying the data over the top of the automatically generated file as I wasn't able to get the earlier suggestion of overriding initComponent() to work for me in the SA generated override file.

Ext.define('Cars.store.TestStore', {
    extend: 'Ext.data.Store',
    requires: [
        'Cars.model.CarData'
    ],


    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};


        var myJson = { make:'BMW', model:'M5' };
        var authorizationString = Base64.encode('username:password');
        
        me.callParent([Ext.apply({
            autoLoad: false,
            storeId: 'TestStore',
            model: 'Cars.model.CarData',
            proxy: {
                type: 'ajax',
                noCache: false,
                pageParam: '',
                startParam: '',
                limitParam: '',
                url: 'http://localhost:7777/Cars/cars/create',
                actionMethods: {
                    read: 'POST'
                },
                headers: {
                    'Content-Type':'application/json; charset=utf-8',
                    'Authorization': 'Basic ' + authorizationString
                },
                reader: {
                    type: 'json',
                    encodeRequest: true,
                },
                /*
                * 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,
                        params        : Ext.JSON.encode(myJson),
                        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;
                }                
            }
        }, cfg)]);
    }
});