How to retrieve columns and data dynamically

Question

I am working on an ExtJS application and have some GridPanels that need to show some data. Is it possible to have the columns and data retrieved dynamically so I don't have to specify them manually for each table?

Thank you.

Answer 1

I created a dynamicgridpanel component:

Ext.define('Ext.ux.grid.DynamicGridpanel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.dynamicgridpanel',
    /* author: Alexander Berg, Hungary */

    storeUrl: '', //some url here
    columnDefinitionUrl: '', //some url here
    columnDefinitionParams: {}, //params here
    columns: [],
    capitalize: true,
    storeAutoLoad: false,

    /* Make a call to the server for the columns definiton, create a store, reconfigure the grid with it  */
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        me.addEvents({'afterColumndefinitionsLoad' : true},{'beforeColumndefinitionsLoad' : true});
        me.fireEvent('beforeColumndefinitionsLoad', me);
        // make an ajax request to get the grids column definiton from server
        Ext.Ajax.request({
            url: me.columnDefinitionUrl,
            params: me.columnDefinitionParams,
            success: function (response) {
                var object = Ext.decode(response.responseText, false);
                //if the response has sent back a List of strings i.e. "columns" : ["dataindex1","dataindex2","dataindex3"]
                if (object.columnsNames) {
                    var columnsFromServer = [];
                    if(Ext.isArray(object.columnsNames)) {
                        for (var x in object.columnsNames) {
                            var columnText = object.columnsNames[x];
                            if (me.capitalize) {
                                columnText = Ext.String.capitalize(columnText);
                            }
                            columnsFromServer.push({ dataIndex: object.columnsNames[x], text: columnText});
                        }
                    } else {
                        var columnText = object.columnsNames;
                        if (me.capitalize) {
                            columnText = Ext.String.capitalize(columnText);
                        }
                        columnsFromServer.push({ dataIndex: object.columnsNames, text: columnText});
                    }
                //if the response has sent back a List of column objects i.e. "columns" : [{"dataindex1"},"dataindex2","dataindex3"]
                } else if (object.columns) {
                    var columnsFromServer = object.columns
                } else {
                    Ext.Msg.show({
                        title:'Error',
                        msg: 'No columnsNames and no columns!',
                        buttons: Ext.Msg.OK,
                        icon: Ext.Msg.ERROR
                    });
                }
                var fields = [];
                Ext.each(columnsFromServer, function (column) {
                    fields.push(column.dataIndex);
                });
                // create the store
                var storeConfig = {
                    storeId: 'store_' + me.id,
                    fields: fields,
                    autoLoad: me.storeAutoLoad,
                    proxy: {
                        type: 'ajax',
                        url: me.storeUrl,
                        reader: {
                            type: 'json',
                            root: me.storeRoot,
                            successProperty: 'success'
                        }
                    }
                };
                if (me.storeParams) {
                    storeConfig.proxy.extraParams = me.storeParams;
                }
                var store = Ext.create('Ext.data.Store', storeConfig);
                me.reconfigure(store, columnsFromServer); // reconfigure the store, and the columns
                me.fireEvent('afterColumndefinitionsLoad', me);
            }
        });
    }
});

Usage:

{
    xtype : 'dynamicgridpanel',
    storeUrl : '/something/data/testData.json',
    storeParams : {
        param1 : 'param1',
        param2 : 'param2'
    },
    storeRoot : 'storeData',
    storeAutoLoad : true,
    columnDefinitionUrl : '/something/data/testCol.json',
    columnDefinitionParams : {
        param1 : 'param1',
        param2 : 'param2'
    }
}

example for /something/data/testCol.json:

{
    msg : "Success",
    success : true,
    columnsNames : ["column1", "column2", "column3", "column4"]
}

example for /something/data/testData.json:

{
    msg : "Success",
    success : true,
    storeData : [
        {column1: "row1 col1", column2: "row1 col2", column3: "row1 col3", column4: "row1 col4"},
        {column1: "row2 col1", column2: "row2 col2", column3: "row2 col3", column4: "row2 col4"},
        {column1: "row3 col1", column2: "row3 col2", column3: "row3 col3", column4: "row3 col4"}
    ]
}