Dynamic grid with dynamic model

[plum]

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

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

/**
 * 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:

/**
 * @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'):

[{"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

[scottmartin]

Thank you for sharing your code.

Scott.

[Fabyo]

provide the content json

thank you

[plum]

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

[Fabyo]

thank you

[divya.booravalli]

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.

[plum]

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

[sencha.user]

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.

[plum]

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

Best regards
Lukas

[sencha.user]

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.