Extending Ext.data.Store

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

Answer 2

Here is another way:

Base store (app/store/Base.js):

Ext.define('Admin3.store.Base', {
    extend: 'Ext.data.Store',
    autoLoad: true,
    autoSync: true
});

Base proxy (app/proxy/Base.js):

Ext.define('Admin3.proxy.Base', {
    extend: 'Ext.data.proxy.Ajax',
    alias: 'proxy.base',
    reader: {
        type: 'json',
        root: 'items',
        successProperty: 'success',
        messageProperty: 'message'
    },
    listeners: {
        exception: function(proxy, response, operation){
            console.log(response, operation);
            Ext.Msg.show({
                title: 'Remote Exception',
                msg: typeof operation.getError() === 'string' ? operation.getError() : operation.getError().statusText,
                icon: Ext.Msg.ERROR,
                buttons: Ext.Msg.OK
            });
        }
    }
});

Concrete store (app/store/Users.js):

Ext.define('Admin3.store.Users', {
    extend: 'Admin3.store.Base',
    model: 'Admin3.model.User',
    proxy: Ext.create('Admin3.proxy.Base', {
        api: {
            read: 'data/read.php',
            update: 'data/update.php'
        }
    })
});

Answer 3

I think the other answers here might be a bit more complicated than they need to be. As of version 4.0.0, ExtJS has an Ext.Object.merge() method that will allow an approach very close to what the asker was attempting.

Using the values that the asker has, I'd define my "abstract" store like this:

Ext.define("Ext.ux.data.Store", {
    extend: "Ext.data.Store",
    constructor: function(config) {
        var defaults = {
            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
            }
        };
        this.callParent([Ext.Object.merge({}, defaults, config)]);
    }
});

I'd then create my concrete stores like this:

Ext.create("Ext.ux.data.Store", {
    storeId: "ExampleStore",
    model: "ExampleModel",
    autoLoad: true, // This overrides the defaults
    proxy: {
        api: {
            read: "/example/read"  // This overrides the defaults
        }
    }
});

This approach will also work for multiple levels of components. You could, for instance, model a read-only store:

Ext.define("Ext.ux.data.ReadonlyStore", {
    extend: "Ext.ux.data.Store",
    constructor: function(config) {
        var overrides = {
            proxy: {
                api: {
                    create: undefined,
                    update: undefined,
                    destroy: undefined
                }
            }
        }
        this.callParent([Ext.Object.merge({}, config, overrides)]);  // Note that the order of parameters changes here
    }
});