1. #61
    Sencha User
    Join Date
    Jun 2013
    Posts
    26
    Vote Rating
    0
    mkm_2013 is on a distinguished road

      0  

    Default Combobox in dynamicGrid

    Combobox in dynamicGrid


    Thanks for you reply . I have solved the problem of putting combo in dynamicgrid.I used storeid attribute.

  2. #62
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    37
    Vote Rating
    1
    tdobberphul is on a distinguished road

      0  

    Default DynamicGrid.js doesn't work with extjs4.2

    DynamicGrid.js doesn't work with extjs4.2


    I have a problem:
    The 'metachange'-event is never fired so nothing is shown. Everything else works fine (json-loading etc.). Everything is ready, waiting for the metachange event.

    Perhaps there was an extjs - change in 2014 ?
    It seems as if the metaData - property is read-only ?! So one can set it in the code but it will not change and so there is no event fired?

    Please help,
    Tobias

  3. #63
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    37
    Vote Rating
    1
    tdobberphul is on a distinguished road

      0  

    Default


    Problem ExtJS 4.2 metachange-event not thrown solved with this workaround:
    Use load-event instead:
    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: '',
        visibleColumns: null,
    
    
        initComponent: function() {
            console.log('DynamicGrid initComponent!');
            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);
                            },*/
    'load': function(store, records, successful, eOpts) {
                                me.reconfigure(store, store.getProxy().getReader().metaData.columns);
                            }
                        },
                        autoLoad: true,
                        remoteSort: false,
                        remoteFilter: false,
                        remoteGroup: false,
                        proxy: {
                            reader: Ext.create('Ext.ux.data.reader.DynamicReader', {
                                visibleColumns: me.visibleColumns
                            }),
                            type: 'rest',
                            url: me.url
                        }
                    })
                });
            }
    
    
            me.callParent(arguments);
        }
    });

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

      0  

    Default


    tdobberphul, thanks for workaround. I created branch on github repo with this code:
    https://github.com/nonameplum/Dynami...e/extjs4.2-fix


  5. #65
    Sencha User
    Join Date
    Dec 2013
    Posts
    34
    Vote Rating
    1
    zenrast is on a distinguished road

      0  

    Default Dynamic Grid with Ext.Direct

    Dynamic Grid with Ext.Direct


    Does Dynamic Grid work with Ext.Direct ?

  6. #66
    Sencha User
    Join Date
    Apr 2012
    Posts
    1
    Vote Rating
    0
    hiltonopl is on a distinguished road

      0  

    Default Problem with IE compatibility mode

    Problem with IE compatibility mode


    Hi Lukas,

    This code is brill and I am using it in my application. However, I need to use it in IE compatibility mode and it doesn't work. I know IE compatibility mode doesn't like trailing commas, but I can't find any. Any suggestions?

    Thanks,

    Hilton

    Quote Originally Posted by plum View Post
    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