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

Posted by Peter Kellner on January 21, 2014 · 4 mins read

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: function (dataLocation, whenFinishedExecuteThis) {
        //return [{ id: 10, title: 'title1', codeCampYearId: 101 }, { id: 20, title: 'title2', codeCampYearId: 101 }];
        Ext.Ajax.request({
            url: dataLocation,
            success: function (response) {
                whenFinishedExecuteThis(Ext.JSON.decode(response.responseText));
            }
        });

    },

    launch: function () {


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

            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items: [
                    {
                        xtype: 'sessions'
                    }
                ]
            });
        });

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

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

        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                myPanel
            ]
        });

    }
});

Hope this helps!