1. #1
    Sencha User
    Join Date
    Oct 2009
    Posts
    42
    Vote Rating
    2
    berntkau is on a distinguished road

      0  

    Default Unable to display data in dynamically created grid

    Unable to display data in dynamically created grid


    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!

    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 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();
                            }
                        }
                    });
                }
            }
        }); 
    }
    Last edited by berntkau; 27 Mar 2012 at 1:59 AM. Reason: code layout messed up

  2. #2
    Sencha User
    Join Date
    Oct 2009
    Posts
    42
    Vote Rating
    2
    berntkau is on a distinguished road

      0  

    Default [SOLVED]Unable to display data in dynamically created grid

    [SOLVED]Unable to display data in dynamically created grid


    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:

    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();
                            }
                        }
                    });
                }
            }
        }); 
    }

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Glad you were able to get your problem resolved!
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 1