Sencha Touch: load data into store from HTML application cache?

Question

If I have a store, like this example:

var myStore = Ext.create("Ext.data.Store", {
    model: "User",
    proxy: {
        type: "ajax",
        url : "/users.json",
        reader: {
            type: "json",
            rootProperty: "users"
        }
    },
    autoLoad: true
});

I want to cache the users.json file in the application cache, so I add it to app.json as follows:

    /**
     * Used to automatically generate cache.manifest (HTML 5 application cache manifest) file when you build
     */
    "appCache": {
        /**
         * List of items in the CACHE MANIFEST section
         */
        "cache": [
            "index.html",
            "users.json"
        ],
        /**
         * List of items in the NETWORK section
         */
        "network": [
            "*"
        ],
        /**
         * List of items in the FALLBACK section
         */
        "fallback": []
    },

Looking in Chrome developer tools, I can see that the .json file has been added to the application cache correctly, along with index.html.

I would expect this to 'just work' offline. Unfortunately it doesn't, it tries to request the json file, which doesn't work as it is offline, and then it no longer uses that data in the application.

The rest of the application works perfectly fine. Any ideas?

Answer 1

Found the solution from looking into the API documentation and doing a bit of trial and error with properties. It is not obvious at all.

The problem was, the requests for the .json files was being appending with additional arguments, ?dc=XXXXXXX and paging arguments. There are two additional properties that need to be applied to the proxy: noCache and enablePagingParams. This did the trick.

var myStore = Ext.create("Ext.data.Store", {
    model: "User",
    proxy: {
        type: "ajax",
        url : "/users.json",
        noCache: false,
        enablePagingParams: false,
        reader: {
            type: "json",
            rootProperty: "users"
        }
    },
    autoLoad: true
});

I also needed to update the header comment on my test cache.manifest file, to ensure that the changes to the stores were detected correctly, as I kept getting Loader errors. This isn't a problem once you use sencha CMD to build the production version as it auto-generates the application cache file for you.

NOTE: I did already have the following, widely documented, in my app.js file as well:

Ext.Loader.setConfig({
    disableCaching: false
});

Hope this helps someone!