Unable to display data in dynamically created grid

[berntkau]

This is probably not a designer alone problem, but I post it here because I work mainly with Designer 2.


In my effort to develop a dynamic model/store/grid creation I've done the following:


In Designer2
1) I created a window with border layout.
2) In the west region I've placed a tree panel.
3) In the center region I've placed a panel with accordion layout.
4) The accordion panel holds a gridpanel.


The tree panel queries and displays all databases in my MySql database server. Expanding database level shows the respective tables. Clicking a table loads meta data concerning the tables (field names, type, length ... etc.) into a grid panel in the accordion panel.


This works like a charm. No problems there.


My next goal has been to open another pane in the accordion panel showing the data stored in the tables. For this purpose I have


in Designer created
5) a model named DynamicModel and
6) a store named DynamicStore and a
7) a grid named DynamicGrid


(all of these with only a minimal amount of properties as they will be modified and added on demand)


I have a controller which handles click events on the tree nodes and triggers a handler. See code below.


Expected result: When clicking a table in the tree panel I get two panels in the accordion panel the grid with table data expanded. Data loaded and displayed. Switching between accordion panels shows either table meta data or stored data.


Actual result: When clicking table the dynamic grid is showing. Data has been loaded, I can see this with the Chrome debugger. Column headers show and nicely rendered striped rows equaling the number of rows in the store. Except, no data is displayed. switching between accordion panels works an the table meta data shows normally.


So the problem seems to be that the dynamic grid doesn't recognize the data in the store. The data also has the correct json format.


I've tried different ways to assign the store property to the grid eg store: dynstore (the variable holding the store object, store: dynstore.storeId and store: 'DynamicStore' (the Class name. No success. I've not been able to display the data in the grid. The rows are there but they are blank.


I hope somebody could see where I'm going wrong. or come up with hopefully a better, that is working solution.


Thanks!

onTreeviewItemClick: function(dataview, record, item, index, e, options) {
    // determine clicked item
    var node = record.data.id;
    var nodeparent = record.data.parentId;


    // if a database is clicked clear meta data table
    // else a database/table pair will be sent as parameters
    if (nodeparent == 'db_root') {
        node = '';
        nodeparent = '';
    }
    
    // create references
    var win = dataview.up('DbWin');
    var metagrid = win.down('TblMetaGrid');
    var metastore = metagrid.getStore();


    // if table is clicked the fields and their meta data are shown
    metastore.load({
        params:{
            database: nodeparent,
            table: node
        },
        callback: function(records, operation, success) {
            // if table is clicked dynamically create a second grid
            // showing data stored in table
            if (node !== '') {
                // initiate arrays
                var fieldNames = [];
                var modelFields = [];
                var gridColumns = [];


                // retrieve clicked table fieldnames
                Ext.Array.each(records, function(prop) {
                    fieldNames.push(prop.data.Field);
                });


                // create the model fields array
                // create the grid column array
                Ext.Array.each(fieldNames, function(fldname){
                    modelFields.push({name: fldname, type: 'string'});
                    gridColumns.push({text: fldname, dataIndex: fldname});
                });


                // reference to panel with accordion layout
                var pnl = win.down('#dbwin-panel');


                // reference to the dynamically created grid
                // a previous can already exist
                var dyngrid = win.down('DynGrid');


                // check if a previously created dynamic grid exists,
                // if so, destroy it. (As for now I only wish they 
                // exist one at a time)
                if (dyngrid) {
                    dyngrid.destroy();
                }


                // create instance of the dynamic model replacing fields
                var dynmdl = Ext.create('MyApp.model.DynamicModel', {
                    fields: modelFields
                });


                // create instace of dynamic store assigning the modified model
                var dynstore = Ext.create('MyApp.store.DynamicStore', {
                    constructor: function(cfg) {
                        var me = this;
                        cfg = cfg || {};
                        me.callParent([Ext.apply({
                            // assign modified model
                            model: dynmdl,
                            proxy: {
                                type: 'ajax',
                                reader: {
                                    type: 'json',
                                    root: 'records'},
                                    successProperty: 'success'
                            }
                        }, cfg)]);
                    }
                });


                // create instance of dynamic grid
                dyngrid = Ext.create('MyApp.view.DynamicGrid', {
                    animCollapse: false,
                    collapsible: true,
                    autoWidth: true,
                    titleCollapse: true,
                    collapseFirst: false,
                    collapsed: true,
                    itemId: 'db-tbldata-itemid',
                    title: 'Tabledata',
                    viewConfig: {
                        itemId: 'tbldata-gridview'
                    },
                    // assign modified columns
                    columns: gridColumns,
                    // assign modified store
                    store: dynstore
                });


                // add the grid to the "accordion panel"
                pnl.add(dyngrid);


                // load data to the dynamic store
                dyngrid.getStore().load({
                    url: 'to/my/json/source',
                    params: {
                        database: nodeparent,
                        table: node
                    },
                    // on success expand the dynamic grid
                    callback: function(success) {
                        if (success){
                            dyngrid.expand();
                        }
                    }
                });
            }
        }
    }); 
}

[berntkau]

Hi!

The problem got finally solved. I had actually misinterpreted the main reason, which I thought was the grid, but the actual problem was the model that refused to accept my assignment of fields.

Thanks to Ed Spencer, whom I found helping somebody else how to dynamically define classes on the fly, I found a working solution.

From Designer I deleted my dynamic model and store and defined and instantiated them from scratch in my event handler. Now the code does what I wanted it to do. I get a accordion window with grids showing both table meta data and table data.

I suppose even the dynamic grid could be completely defined in code, but as I intend to develop it further to a editable grid with CRUD capabilities I will leave it as a partly created component in Designer where I can easily give it more functionality.

Once more thanks to Ed and I really like working with Designer!

The new version of my event code:

onTreeviewItemClick: function(dataview, record, item, index, e, options) {    // determine clicked item
    var node = record.data.id;
    var nodeparent = record.data.parentId;


    // if a database is clicked clear meta data table
    // else if a table is clicked a database/table pair will be sent as parameters
    if (nodeparent == 'db_root') {
        node = '';
        nodeparent = '';
    }
    
    // create references
    var win = dataview.up('DbWin');
    var metagrid = win.down('TblMetaGrid');
    var metastore = metagrid.getStore();


    // if table is clicked the fields and their meta data are shown
    metastore.load({
        params:{
            database: nodeparent,
            table: node
        },
        callback: function(records, options, success) {
            // if table is clicked dynamically create a second grid
            // showing data stored in table
            if (node !== '') {
                // initiate arrays
                var fieldNames = [];
                var modelFields = [];
                var gridColumns = [];


                // retrieve clicked table fieldnames
                Ext.Array.each(records, function(prop) {
                    fieldNames.push(prop.data.Field);
                });


                // create the model fields array
                // create the grid column array
                Ext.Array.each(fieldNames, function(fldname){
                    modelFields.push({name: fldname, type: 'string'});
                    gridColumns.push({text: fldname, dataIndex: fldname});
                });


                // reference to panel with accordion layout
                var pnl = win.down('#dbwin-panel');


                // reference to the dynamically created grid
                // as a previous can already exist
                var previousgrid = win.down('DynGrid');


                // check if a previously created dynamic grid exists,
                // if so, destroy it. (As for now I only wish they 
                // exist one at a time)
                if (previousgrid) {
                    previousgrid.destroy();
                }


                // define and create instance of dynamic model
                Ext.define('DynamicModel', {
                    extend: 'Ext.data.Model',
                    fields: modelFields
                });
                var dynmdl = Ext.create('DynamicModel');


                // define and create instace of dynamic store
                Ext.define('DynamicStore', {
                    extend: 'Ext.data.Store',
                    model: 'DynamicModel',
                    proxy: {
                        type: 'ajax',
                        url: 'my/json/source',
                        reader: {
                            type: 'json',
                            root: 'records'
                        }
                    }
                });
                var dynstore = Ext.create('DynamicStore');


                // create instance of dynamic grid
                var dyngrid = Ext.create('MyApp.view.DynamicGrid', {
                    animCollapse: false,
                    collapsible: true,
                    autoWidth: true,
                    titleCollapse: true,
                    collapseFirst: false,
                    collapsed: true,
                    itemId: 'db-tbldata-itemid',
                    title: 'Tabledata',
                    viewConfig: {
                        itemId: 'tbldata-gridview'
                    },
                    // assign modified columns
                    columns: gridColumns,
                    // assign modified store
                    store: dynstore
                });


                // add the grid to the "accordion panel"
                pnl.add(dyngrid);


                // load data to the dynamic store
                dyngrid.getStore().load({
                    params: {
                        database: nodeparent,
                        table: node
                    },
                    callback: function(records,options,success) {
                        if (success){
                            dyngrid.expand();
                        }
                    }
                });
            }
        }
    }); 
}

[aconran]

Glad you were able to get your problem resolved!