Threaded View

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


    Default Dynamic grid with dynamic model


    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:
    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'
     * Lukas Sliwinski
     * 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('', {
                        // 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
                        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
    Dynamic reader:
     * @class
     * @extends
     * <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(, {
            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('', {
        extend: '',
        alias: 'reader.dynamicReader',
        alternateClassName: '',
        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.

    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.

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