How to use Dynamic grid panel and pagingmemory proxy

[AnthonyViard]

Hello everybody,
before strating you have to know that i'm a french so excuse me if my english is bad .

After using ExtJs 3 or 4 years ago i'm starting a new project with the ExtJs 4 version. I'm please to see that the framework grew very well.

What i want to do ?
A dynamic grid panel (column definition and content) with paging memory. In fact the client side will just send one request to get all content and pagging after (max 100 elements will be returned by the server).
The grid panel object will be used in many place in the application. Columns and data are not the same in all pages. For the same grid panel instance users can choose to show or not some columns.

The dynamic grid panel i'm using :

/**
 * Ext.ux.grid.DynamicGridPanel
 */
Ext.define('Ext.ux.grid.DynamicGridPanel', {
    extend: 'Ext.grid.GridPanel',
    alias: 'widget.dynamicgrid',
    /**
     * initialising the components
     */
    initComponent: function(){
        /**
         * set the config we want
         */
        var config = {
            columns:[],
            rowNumberer: false
        };

        // appy to this config
        Ext.apply(this, config);
        // apply to the initialConfig
        Ext.apply(this.initialConfig, config);
        // call the arguments
        this.callParent(arguments);
    },
    /**
     * When the store is loading then reconfigure the column model of the grid
     */
    storeLoad: function()
    {
        /**
         * JSON data returned from server has the column definitions
         */
        if(typeof(this.store.proxy.reader.jsonData.columns) === 'object') {
            var columns = [];
            /**
             * adding RowNumberer as we need to add them
             * before other columns to display first
             */
            if(this.rowNumberer) { columns.push(Ext.create('Ext.grid.RowNumberer')); }
            /**
             * assign new columns from the json data columns
             */
            Ext.each(this.store.proxy.reader.jsonData.columns, function(column){
                columns.push(column);
            });
            /**
             *  reconfigure the column model of the grid
             */
            this.reconfigure(this.store, columns);
        }
    },
    /**
     * assign the event to itself when the object is initialising
     */
    onRender: function(ct, position){
        /**
         *  well, old fashion way, but works well.
         */
        Ext.ux.grid.DynamicGridPanel.superclass.onRender.call(this, ct, position);
        /**
         * hook the store load event to our function
         */
        this.store.on('load', this.storeLoad, this);


    },
    beforeRender: function(ct, position){
        this.addDocked({
            xtype: 'pagingtoolbar',
            store: this.getStore(),
            dock: 'bottom',
            displayInfo: true
        });
        this.addDocked({
            xtype: 'toolbar',
            dock: 'top',
            items: [
                { xtype: 'button', text: 'Historique' },
                { xtype: 'button', text: 'Valider' }
            ]
        });
    }
});

the model :

       Ext.define('MyModel', {
            extend: 'Ext.data.Model',
            proxy: {
               type: 'ajax',
               //type: 'pagingmemory',
                url : 'resources/js/data.json',
                //data : 'resources/js/data.json',
                reader: {
                    type: 'json'
                    //,root: 'data'
                }
            }
        });

the store :

        var MyStore = Ext.create('Ext.data.Store', {
            model: 'MyModel',
            pageSize: 5
        });

the gridpanel instance :

        Ext.create('Ext.ux.grid.DynamicGridPanel', {
            id: 'my-grid',
            title: 'Dynamic grid panel',
            store: MyStore,
            rowNumberer: true,
            selModel: Ext.create('Ext.selection.CheckboxModel'),
            height: 400,
            width: 800
        }).render('nautilGrid');
        MyStore.load();

example of data from json :

{"metaData":
{"idProperty":"id","totalProperty":"total","successProperty":"success","root":"data"
    ,"fields":[
        {"name":"ID","type":"int","allowBlank":false,"defaultValue":"0"},
        {"name":"USER","type":"string","allowBlank":false,"defaultValue":""},
        {"name":"HOST","type":"string","allowBlank":false,"defaultValue":""},
        {"name":"DB","type":"string","allowBlank":true,"defaultValue":null},
        {"name":"COMMAND","type":"string","allowBlank":false,"defaultValue":""},
        {"name":"TIME","type":"int","allowBlank":false,"defaultValue":"0"},
        {"name":"STATE","type":"string","allowBlank":true,"defaultValue":null},
        {"name":"INFO","type":"string","allowBlank":true,"defaultValue":null}
    ]},"success":true,"total":1,"message":"Loaded data"
    ,"data":[
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"},
        {"ID":"12177","USER":"BCD","HOST":"::1:10649","DB":"information_schema","COMMAND":"Query","TIME":"0","STATE":"executing","INFO":"SELECT * FROM `PROCESSLIST` LIMIT 0,50"}
    ]
    ,"columns":[
        {"header":"ID","dataIndex":"ID","sortable":true},
        {"header":"USER","dataIndex":"USER","sortable":true},
        {"header":"HOST","dataIndex":"HOST","sortable":true},
        {"header":"DB","dataIndex":"DB","sortable":true},
        {"header":"COMMAND","dataIndex":"COMMAND","sortable":true},
        {"header":"TIME","dataIndex":"TIME","sortable":true},
        {"header":"STATE","dataIndex":"STATE","sortable":true},
        {"header":"INFO","dataIndex":"INFO","sortable":true}
    ]
}

As we can see the grid panel use this to read column def :

this.store.proxy.reader.jsonData

In case of ajax proxy this work fine "jsonData" return data as excepted, in this case the model use the "url" parameter to know where the data are stored.

In case of pagging memory proxy (that i want to use) this does not work at all, "jsonData" return the url of the json file (example "resources/js/data.json"), in this case the model use the data parameter.
Json content is not read by the grid panel and both columns and data are not displayed properly.

At this moment i didn't fine a way to read and display data and grid conf from json with paggingmemory proxy.

If someone know how to do this...

Thanks a lot and happy new year

ps: if i succeed the next step will be to get and store columns def for a grid (maybe in mysql database)

[mitchellsimoens]

There has been people doing this on the forums. Try searching to find solutions they have posted. Using metadata and metachange event on the store is a thing to look in to.

[AnthonyViard]

I did'nt find any solution about this.

But it seems like the pagingmemory proxy can't read Json Data properly. If i give it Array data it work fine.

Does the pagingmemory Proxy can read json data ?

i found this thread :
http://www.sencha.com/forum/showthre...gingStore-v0.5

For local paging you can use the PagingMemoryProxy user extension, but it has some disadvantages:
1. You have to write extra code to remote load the data for the proxy.

it sounds like my problem is'nt it ? the only problem is that the pagingStore seems not to be avaible for the 4.X extsJs version.