Question

I would like to be able to maintain different stores from the same json where the model for each store is the same. Each store would need to be updated based on its root property assignment. Please see below for a sample json, store, and model, in which case each store would be updated based on the json’s root property value (category 1, category 2, etc.). The goal is to be able to bind a nested list in my application to different stores on the fly, rather than call setProxy to change the url setting on a single store. Also, the json needs to be in this format. Thanks for your help and please let me know if I can provide clarification or answer any questions.

Json:

{
    "items": [
        {
            "name": "category 1",
            "status": "",
            "displaytext": "",
            "items": [
                {
                    "name": "",
                    "status": "",
                    "displaytext": "",
                    "items": [
                        {
                            "name": "",
                            "status": "",
                            "displaytext": "",
                            "items": [
                                {
                                    "name": "",
                                    "status": "",
                                    "displaytext": "",
                                    "leaf": true
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "name": "category 2",
            "status": "",
            "displaytext": "",
            "items": [
                {
                    "name": "",
                    "status": "",
                    "displaytext": "",
                    "items": [
                        {
                            "name": "",
                            "status": "",
                            "displaytext": "",
                            "leaf": true
                        }
                    ]
                }
            ]
        },
        {
            "name": "cateory 3",
            "status": "",
            "displaytext": "",
            "items": []
        },
        {
            "name": "category 4",
            "status": "",
            "displaytext": "",
            "items": []
        }
    ]
}

Model:

Ext.define('MyApp.model.myModel', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {
                name: 'name',
                type: 'string'
            },
            {
                name: 'status',
                type: 'string'
            },
            {
                name: 'displaytext',
                type: 'string'
            }
        ]
    }
});

Store 1, 2, 3, etc:

Ext.define('MyApp.store.storeCategory1', {
    extend: 'Ext.data.TreeStore',
    requires: [
        'MyApp.model.myModel'
    ],

    config: {
        model: 'MyApp.model.myModel',
        storeId: 'myStore',
        autoLoad: false,
        proxy: {
            type: 'ajax',
            url: '/path/to/file.json',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        }
    }
});

Answer 1

I think you best bet would be to make a server request independent of the Store’s proxy. On success, split up the data into the different stores as needed. It’s fine to preprocess data this way, especially if you need to split one large data response into multiple data stores. For example:

Ext.Ajax.request({
    url: 'path/to/file.json',
    success: function(response){
        // process server response here
        var json = Ext.decode(response.responseText);
        for(var i=0, l=json.items.length, i<l; i++){
            // start distributing the data to your different stores here
        }
    }
});

Hope this helps.