Threaded View

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

      7  

    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)

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar