1. #1
    Sencha User
    Join Date
    Nov 2008
    Location
    France
    Posts
    28
    Vote Rating
    2
    AnthonyViard is on a distinguished road

      0  

    Default How to use Dynamic grid panel and pagingmemory proxy

    How to use Dynamic grid panel and pagingmemory proxy


    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 :
    Code:
    /**
     * 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 :
    Code:
           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 :
    Code:
            var MyStore = Ext.create('Ext.data.Store', {
                model: 'MyModel',
                pageSize: 5
            });
    the gridpanel instance :
    Code:
            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 :
    Code:
    {"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 :
    Code:
    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)

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,756
    Vote Rating
    828
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Location
    France
    Posts
    28
    Vote Rating
    2
    AnthonyViard is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Nov 2013
    Posts
    6
    Vote Rating
    0
    geovanni.duarte is on a distinguished road

      0  

    Default


    Hi I have used the code above by AnthonyViard , that code works correctly except the date filters, when i filter by date in the grid panel i get the follow error on console: TypeError: this.fields[item].menu is null from de DateFilter.js, do you know this error? can sombody helpme? thankyou. the other filters type (number, string) work.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi