Using the ExtJS SimManager To Provide Mock JSON Data To a Store Proxy

I’ve got an ExtJS Store defined as follows:

Ext.create('Ext.data.Store', {
                    storeId: 'testStore',
                    fields: ['codeCampYearId', 'title'],
                    autoLoad: true,
                    pageSize: 9999,
                    proxy: {
                        type: 'rest',
                        url: '/rest/SessionExt',
                        reader: {
                            type: 'json',
                            root: 'data'
                        }
                    }
                });

I have some JSON data in a local file that I want to use and I don’t want to change the URL.  Using the ExtJS SimManager, I can make some simple code changes and my ExtJS ajax request will get redirected for me.  Below is the code that takes care of it.

Ext.application({
    requires: [
        'Ext.container.Viewport',
        'Ext.grid.column.Date',
        'Ext.ux.ajax.SimManager',
        'Ext.ux.ajax.Simlet',
        'Ext.data.proxy.Proxy',
        'Ext.data.proxy.Ajax',
        'Ext.layout.container.Fit',
        'Ext.grid.Panel',
        'Ext.data.Store',
        'Ext.data.reader.Json'
    ],
    name: 'Fiddle',
getJsonData: <span class="kwrd">function</span> (dataLocation, whenFinishedExecuteThis) {
    <span class="rem">//return [{ id: 10, title: 'title1', codeCampYearId: 101 }, { id: 20, title: 'title2', codeCampYearId: 101 }];</span>
    Ext.Ajax.request({
        url: dataLocation,
        success: <span class="kwrd">function</span> (response) {
            whenFinishedExecuteThis(Ext.JSON.decode(response.responseText));
        }
    });

},

launch: <span class="kwrd">function</span> () {


    <span class="kwrd">this</span>.getJsonData(<span class="str">'/Data/sessionext.json'</span>, <span class="kwrd">function</span> (theData) {
        <span class="kwrd">var</span> myData = theData.data;
        Ext.ux.ajax.SimManager.init({
            delay: 600
        }).register({
            <span class="str">'/rest/SessionExt'</span>: {
                stype: <span class="str">'json'</span>, <span class="rem">// use JsonSimlet (stype is like xtype for components)</span>
                data: myData
            }
        });

        Ext.create(<span class="str">'Ext.container.Viewport'</span>, {
            layout: <span class="str">'fit'</span>,
            items: [
                {
                    xtype: <span class="str">'sessions'</span>
                }
            ]
        });
    });

    Ext.create(<span class="str">'Ext.data.Store'</span>, {
        storeId: <span class="str">'testStore'</span>,
        fields: [<span class="str">'codeCampYearId'</span>, <span class="str">'title'</span>],
        autoLoad: <span class="kwrd">true</span>,
        pageSize: 9999,
        proxy: {
            type: <span class="str">'rest'</span>,
            url: <span class="str">'/rest/SessionExt'</span>,
            reader: {
                type: <span class="str">'json'</span>,
                root: <span class="str">'data'</span>
            }
        }
    });

    <span class="kwrd">var</span> myPanel = Ext.create(<span class="str">'Ext.grid.Panel'</span>, {
        title: <span class="str">'Session Data'</span>,
        store: Ext.data.StoreManager.lookup(<span class="str">'testStore'</span>),
        scroll: <span class="kwrd">true</span>,
        columns: [
            { text: <span class="str">'title'</span>, dataIndex: <span class="str">'title'</span>, flex: 1 },
            { text: <span class="str">'codeCampYearId'</span>, dataIndex: <span class="str">'codeCampYearId'</span> },
            { text: <span class="str">'id'</span>, dataIndex: <span class="str">'id'</span> },
        ]
    });

    Ext.create(<span class="str">'Ext.container.Viewport'</span>, {
        layout: <span class="str">'fit'</span>,
        items: [
            myPanel
        ]
    });

}
});

Hope this helps!