Question

I am trying to centralize my configuration of EXTJS stores within my application, however, I cannot seem to figure out how to make this happen. I am using ExtJS 4.1.

I have a base store, which I want to hold all of the repetitive configuration stuff, and then my more specific stores to hold what’s actually different.

Ext.define('My.store.Abstract', {
    extend: 'Ext.data.Store',
    autoload:false,
    proxy: {
        type: 'ajax', 
        reader: {  
            type: 'json',
            root: 'data',
            totalProperty: 'total',  
            successProperty: 'success', 
            messageProperty: 'message'  
        },
        writer: {  
            type: 'json',
            encode: true, 
            writeAllFields: true, 
            root: 'data',
            allowSingle: false 
        },
        simpleSortMode: true
    }
});

Then I would like to provide the store specific stuff on a store by store basis —

Ext.define('My.store.Products', {
    extend: 'My.store.Abstract',
    storeId: 'Products',
    model: 'My.model.Product',
    proxy: {
        api: {
            create: '/myurl/create',  
            read: '/myurl/index',
            update: '/myurl/update',  
            destroy: '/myurl/delete' 
        }
    }
});

What I am finding is that it just doesnt behave at all. I believe it has something to do with the proxy, but I just can’t track it down.

What is the correct way to do this? I would prefer not to replicate the same configuration stuff (from my abstract store) across the 350+ stores in my application. As of now, that it what I have, and I thought I was trying to implement a pretty basic concept .. to no avail.

I know things are not working, as basic as the pageSize, or even the autoLoad .. because they are not being respected at all.

I’ve played around with constructors, and calling the parent.

Any help would be greatly appreciated.

Answer 1

You can’t do it that way because you’re expecting to to merge the objects which it just won’t do.

Instead, you’ll want to look at something like this (untested):

Ext.define('Base', {
    extend: 'Ext.data.Store',

    autoLoad: false,

    constructor: function(config) {
        // applyIf means only copy if it doesn't exist
        Ext.applyIf(config, {
            proxy: this.createProxy()
        });
        this.callParent([config]);
    },

    createProxy: function() {
        return {
            reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'total',
                successProperty: 'success',
                messageProperty: 'message'
            },
            writer: {
                type: 'json',
                encode: true,
                writeAllFields: true,
                root: 'data',
                allowSingle: false
            },
            simpleSortMode: true
        }
    }
});

Ext.define('Sub', {
    extend: 'Base',

    createProxy: function(){
        var proxy = this.callParent();
        proxy.api = {
            create: 'create',
            update: 'update'
        };

        return proxy;
    }
});