Extending Ext.data.Store

Question

Here is the super class:

Ext.define('My.store.Direct', {
    extend: 'Ext.store.Direct',
    paramsAsHash: true,
    proxy: {
        reader: {
            type: 'json',
            root: 'data',
            totalProperty: 'total'
        },
        type: 'direct',
    }
});

In subclasses I only need to set the API config. I tried:

Ext.define('My.store.User', {
        extend: 'My.store.Direct',
        model: 'My.model.User',
        storeId: 'user',
        constructor: function () {
            this.callParent(arguments);
            this.getProxy().api.read = RPC.UserApi.read;
        }}
);

Ext.define('My.store.Post', {
        extend: 'My.store.Direct',
        model: 'Mehr.model.Post',
        storeId: 'post',
        constructor: function () {
            this.callParent(arguments);
            this.getProxy().api.read = RPC.PostApi.read;
        }}
);

Unfortunately, after executing the code both store will have the api.read of the first subclass. What is wrong with it? What is proper method of extending stroes?

Answer 1

Create your proxy in constructor, otherwise proxy goes to the prototype of My.store.Direct and because it is an object, not a primitive type (int, string, bool), it is accessed by reference. Thus, changing proxy in one instance changes all instances - there is only one proxy in fact.

So base class should be defined similar to this

Ext.define('My.store.Direct', {
    extend: 'Ext.data.DirectStore',
    paramsAsHash: true,
    constructor:function(config) {
      Ext.merge(config, {proxy: {
        reader: {
            type: 'json',
            root: 'data',
            totalProperty: 'total'
        },
        type: 'direct'
    }
    });
        this.callParent([config]);
    }
});