Two Dynamically Created grid in same page rendering problem

[ajit.mankottil]

I am using custom dynamically generated grid. It is working as expected but unfortunately i have to use two grids in one page and the problem start. When It come to render, the first grid's header overwrite by second grid's header but record of the first grid is still the same.
Thanks for some pointer.
Regards,
Alex
Here is the code.
Grid Config

//*****************************************
//ExtJS method for dynamic columns
//*****************************************
Ext.data.DynamicJsonReader = function (config) {
    Ext.data.DynamicJsonReader.superclass.constructor.call(this, config, []);
};


Ext.extend(Ext.data.DynamicJsonReader, Ext.data.JsonReader, {
    readRecords: function (o) {
        /**
        * After any data loads, the raw JSON data is available for further custom processing.  If no data is
        * loaded or there is a load exception this property will be undefined.
        * @type Object
        */
        this.jsonData = o;
        if (o.metaData) {
            this.onMetaChange(o.metaData);
        }
        var s = this.meta, Record = this.recordType,
            f = Record.prototype.fields, fi = f.items, fl = f.length, v;


        var root = this.getRoot(o) || [], c = root.length, totalRecords = c, success = true;
        if (s.totalProperty) {
            v = parseInt(this.getTotal(o), 10);
            if (!isNaN(v)) {
                totalRecords = v;
            }
        }
        if (s.successProperty) {
            v = this.getSuccess(o);
            if (v === false || v === 'false') {
                success = false;
            }
        }




        var records = [];
        for (var i = 0; i < root.length; i++) {
            var n = root[i].dynamicProperties;
            var values = {};
            for (var j = 0, jlen = n.length; j < jlen; j++) {
                var obj = n[j];
                values[obj.Key] = obj.Value;
            }
            records[records.length] = values;
        }
        // TODO return Ext.data.Response instance instead.  @see #readResponse
        return {
            success: success,
            records: this.extractData(records, true), // <-- true to return [Ext.data.Record]
            totalRecords: totalRecords
        };
    }
});


var reader = new Ext.data.DynamicJsonReader({
    root: 'data',
    successProperty: 'success'
});


Ext.ux.DynamicGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {
    initComponent: function () {
        var config = {
            id:this.id,
            viewConfig: { forceFit: true },
            enableColLock: false,
            loadMask: true,
            border: false,
            stripeRows: true,
            ds: new Ext.data.Store({
                storeId: this.storeId,
                proxy: new Ext.data.HttpProxy({
                    method: 'POST',
                    disableCaching: false,
                    url: this.storeUrl
                }),
                autoLoad: false,
                autoDestroy: true,
                reader: reader
            }),
            columns: []
        };
        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);
        Ext.ux.DynamicGridPanel.superclass.initComponent.apply(this, arguments);
    },
    onRender: function (ct, position) {
        this.colModel.defaultSortable = true;
        Ext.ux.DynamicGridPanel.superclass.onRender.call(this, ct, position);


        this.store.on('metachange', function (store, meta) {
            var columns = [];
            var rows = [];
            // generate columns
            for (var i = 0; i < meta.fields.length; i++) {
                var hidden = meta.fields[i].hidden;
                var control;
                switch (meta.fields[i].xtype) {
                    case "checkbox":
                        control = new Ext.form.Checkbox();
                        break;
                    case "combo":
                        control = new Ext.form.ComboBox();
                        break;
                    case "superboxselect":
                        control = new Ext.ux.form.SuperBoxSelect();
                        break;
                    case "datefield":
                        control = new Ext.form.DateField();
                        break;
                    case "field":
                        control = new Ext.form.Field();
                        break;
                    case "numberfield":
                        control = new Ext.form.NumberField();
                        break;
                    case "radio":
                        control = new Ext.form.Radio();
                        break;
                    case "textarea":
                        control = new Ext.form.TextArea();
                        break;
                    case "textfield":
                        control = new Ext.form.TextField();
                        break;
                    case "timefield":
                        control = new Ext.form.TimeField();
                        break;
                    case "spinnerfield":
                        control = new Ext.ux.Spinner();
                        break;
                    case "xdatetime":
                        control = new Ext.ux.form.DateTime();
                        break;
                    default:
                        break;
                }
                columns.push({ header: meta.fields[i].header, hidden: hidden, dataIndex: meta.fields[i].name, type: meta.fields[i].type, id: meta.fields[i].id, sortable: meta.fields[i].sortable, editor: control });
            }
            // generate grouping header
            for (var i = 0; i < meta.rows.length; i++) {
                rows.push({ colspan: meta.rows[i].colspan, align: meta.rows[i].align, header: meta.rows[i].header });
            }


            var colModel = this.getColumnModel();
            if (meta.rows.length > 0)
                colModel.rows = [rows];
            colModel.setConfig(columns);


        }, this);
        /**
        * And finally load the data from server!
        */
        //this.store.load();
    }
});


Ext.reg('dynamicGridPanel', Ext.ux.DynamicGridPanel);

grdMainEngine1 = new Ext.ux.DynamicGridPanel({
        id: 'grdMainEngine1',
        storeid: 'mainEngine1Store',
        storeUrl: '../../Proxy/EngineLogBookService.svc/GenerateGroupingHeaderGrid',
        plugins: [new Ext.ux.grid.ColumnHeaderGroup({
            rows: [[]]
        })],
        frame: true,
        split: true,
        loadMask: false,
        autoScroll: true,
        viewConfig: {
            forceFit: true
        },
        autoHeight: true,
        columnLines: true,
        collapsible: true,
        animCollapse: false
    });


    grdMainEngine1.store.on('beforeload', function (store, options) {
        options.params.jsonData = Ext.encode(Ext.applyIf(options.params, GetMainEngine1()));
    });


    grdMainEngine2 = new Ext.ux.DynamicGridPanel({
        id: 'grdMainEngine2',
        storeid: 'mainEngine2Store',
        storeReader: 'reader2',
        storeUrl: '../../Proxy/EngineLogBookService.svc/GenerateGroupingHeaderGrid',
        plugins: [new Ext.ux.grid.ColumnHeaderGroup({
            rows: [[]]
        })],
        frame: true,
        split: true,
        loadMask: false,
        autoScroll: true,
        viewConfig: {
            forceFit: true
        },
        //title: 'Inbox',
        autoHeight: true,
        columnLines: true,
        collapsible: true,
        animCollapse: false
    });


    grdMainEngine2.store.on('beforeload', function (store, options) {
        options.params.jsonData = Ext.encode(Ext.applyIf(options.params, GetMainEngine2()));
    });

[plalx]

Could we see the rendering code or the grids container...?

PS: You could greatly reduce your code if you replace your switch statement by something like

control = Ext.create({xtype: meta.fields[i].xtype});