Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    32
    Vote Rating
    14
    plum will become famous soon enough

      8  

    Default Dynamic grid with dynamic model

    Dynamic grid with dynamic model


    Hi,

    I created extension of grid.Panel and reader.Json to make possible to create grid setting only a url - grid would display for you proper columns and data without setting model in store and columns in grid.

    Example of using:
    Complex on github:
    https://github.com/nonameplum/DynamicGrid
    Code:
    Ext.create('Ext.window.Window', {
        width: 400,
        height: 400,
        title: 'Example of Dynamic Grid'
        layout: 'fit',
        items: [
            {
                // All what you have to set! :)
                xtype: 'dynamicGrid',
                url: '/some/url'
            }
        ]
    });
    Extensions:
    Ext.ux.grid.DynamicGrid
    Code:
    /**
     * Lukas Sliwinski
     * sliwinski.lukas@gmail.com
     *
     * Dynamic grid, allow to display data setting only URL.
     * Columns and model will be created dynamically.
     */
    
    Ext.define('Ext.ux.grid.DynamicGrid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.dynamicGrid',
        alternateClassName: 'Ext.grid.DynamicGrid',
        // URL used for request to the server. Required
        url: '',
    
        initComponent: function() {
            var me = this;
    
            if (me.url == '') {
                Ext.Error.raise('url parameter is empty! You have to set proper url to get data form server.');
            }
            else {
                Ext.applyIf(me, {
                    columns: [],
                    forceFit: true,
                    store: Ext.create('Ext.data.Store', {
                        // Fields have to be set as empty array. Without this Ext will not create dynamic model.
                        fields: [],
                        // After loading data grid have to reconfigure columns with dynamic created columns
                        // in Ext.ux.data.reader.DynamicReader
                        listeners: {
                            'metachange': function(store, meta) {
                                me.reconfigure(store, meta.columns);
                            }
                        },
                        autoLoad: true,
                        remoteSort: false,
                        remoteFilter: false,
                        remoteGroup: false,
                        proxy: {
                            reader: 'dynamicReader',
                            type: 'rest',
                            url: me.url
                        }
                    })
                });
            }
    
            me.callParent(arguments);
        }
    });
    Dynamic reader:
    Code:
    /**
     * @class Ext.ux.data.DynamicReader
     * @extends Ext.data.reader.Json
     * <p>Dynamic reader, allow to get working grid with auto generated columns and without setting a model in store</p>
     */
    
    /**
     * floatOrString data type provide proper sorting in grid for string and float
     * if you don't now what data type of that two whould be in column
     */
    Ext.apply(Ext.data.Types, {
        FLOATORSTRING: {
            convert: function(v, n) {
                v = Ext.isNumeric(v) ? Number(v) : v;
                return v;
            },
            sortType: function(v) {
                v = Ext.isNumeric(v) ? Number(v) : v;
                return v;
            },
            type: 'floatOrString'
        }
    });
    
    Ext.define('Ext.ux.data.reader.DynamicReader', {
        extend: 'Ext.data.reader.Json',
        alias: 'reader.dynamicReader',
        alternateClassName: 'Ext.data.reader.DynamicReader',
    
        readRecords: function(data) {
            if (data.length > 0) {
                var item = data[0];
                var fields = new Array();
                var columns = new Array();
                var p;
    
                for (p in item) {
                    if (p && p != undefined) {
                        // floatOrString type is only an option
                        // You can make your own data type for more complex situations
                        // or set it just to 'string'
                        fields.push({name: p, type: 'floatOrString'});
                        columns.push({text: p, dataIndex: p});
                    }
                }
    
    
                data.metaData = { fields: fields, columns: columns };
            }
    
            return this.callParent([data]);
        }
    });
    JSON example (from this json will be created 3 columns: 'data', 'jm' and 'result'):
    Code:
    [{"data":"2012-09-08 10:48:24.0","jm":null,"result":"4.18"},
    {"data":"2012-09-08 10:48:34.0","jm":null,"result":"5.26"},...]
    Extensions tested with Extjs 4.1 & 4.1.1a.
    Fill free to use.

    UPDATE:
    I have created possibilty to define which columns have to be visible.
    If you want to use version of plugin with that option look into my github account visibleColumns branch. You also find there example of using.
    https://github.com/nonameplum/Dynami...visibleColumns

    Best regards,
    Lukas
    Last edited by plum; 27 Nov 2012 at 4:40 AM. Reason: New plugin version (look into versionColumn github branch)

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for sharing your code.

    Scott.

  3. #3
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
    Fabyo is on a distinguished road

      0  

    Default


    provide the content json

    thank you

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    32
    Vote Rating
    14
    plum will become famous soon enough

      0  

    Default


    I updated the first post with example of json. If you have some more complicated json you can try make own implementation of readRecords.

  5. #5
    Sencha User
    Join Date
    May 2007
    Posts
    113
    Vote Rating
    1
    Fabyo is on a distinguished road

      0  

    Default


    thank you

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    54
    Vote Rating
    0
    divya.booravalli is on a distinguished road

      0  

    Default


    I tried the above peice of code but I get data.metaData as undefined. Should there be any node in the json string which says metadata? Can you please post the entire json string which is used.

    Thanks.

  7. #7
    Sencha User
    Join Date
    Jun 2012
    Posts
    32
    Vote Rating
    14
    plum will become famous soon enough

      0  

    Default


    No, there shouldn't be another data (like metadata), only "pure" json objects in table. Like you can see in first post json should b

    JSON example (from this json will be created 3 columns: 'data', 'jm' and 'result'):
    Code:

    [{"data":"2012-09-08 10:48:24.0","jm":null,"result":"4.18"},{"data":"2012-09-08 10:48:34.0","jm":null,"result":"5.26"},...]

    If you have problem with metadata this means you should debug method readRecords of my extension DynamicReader .

    Can you provide some json code and implementation of your grid then I would help you posting some proper snippet?

    Best regards

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    Hi,

    Can someone explain me how I should use this piece of code? Where those js should go? A complete example will be of great help.

    Thanks.

  9. #9
    Sencha User
    Join Date
    Jun 2012
    Posts
    32
    Vote Rating
    14
    plum will become famous soon enough

      0  

    Default Example

    Example


    I created example how to use my addon:
    https://github.com/nonameplum/DynamicGrid

    Best regards
    Lukas

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    Hi Lukas,

    Thanks very much, that really helped in a way. But you say we have to just give some url in the VIEW js, I changed that with my PHP file that returns JSON data. But I see to that Viewport.js doesn't have any effect with that url? Am I missing something?

    Thanks.

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