Main Contents

Data only displays on second load

jack @ January 5, 2009

  • Hello all,

    I hope this isn't a really stupid question, but it seems like I am missing something really obvious, so it probably is.

    I have been trying to get this to work for a few days now, and am not getting anywhere.

    I have a tab panel, and use the following code to open a new tab, and display some grid data. The problem is the first time I click the button that calls this function, only the tab displays, but no grid and no data. If I click it a second time, it all shows up as expected.

    Can someone point me in the right direction?

    Thanks.


    var tabMain; // Main application tab panel
    var dsBackupAlerts;
    var colmodBackupAlerts;
    var egpBackupAlerts;
    var tabBackupAlerts;

    var openBackupAlertTab = function() {
    dsBackupAlerts = new Ext.data.Store({
    proxy : new Ext.data.HttpProxy({
    url : 'json_rdbms_backup_alerts.py',
    method : 'POST'
    }),
    reader : new Ext.data.JsonReader({
    id : 'id',
    root : 'rows'
    },['id', 'database', 'sched']),
    listeners : {
    'load' : function () {
    tabMain.add(tabBackupAlerts);
    tabMain.activate('tabBackupAlerts');
    }
    }
    });

    colmodBackupAlerts = new Ext.grid.ColumnModel([{
    header : 'Database',
    readOnly : true,
    dataIndex : 'database',
    width : 150,
    hidden : false
    }, {
    header : 'Schedule',
    readOnly : true,
    dataIndex : 'sched',
    width : 60,
    hidden : false
    }]);
    colmodBackupAlerts.defaultSortable = true;

    egpBackupAlerts = new Ext.grid.EditorGridPanel({
    id : 'egpBackupAlerts',
    store : dsBackupAlerts, // the datastore is defined here
    cm : colmodBackupAlerts, // the columnmodel is defined here
    enableColLock : false,
    clicksToEdit : 1,
    autoScroll : true,
    height: 500,
    selModel : new Ext.grid.RowSelectionModel({
    singleSelect : false
    }),
    tbar : [{
    text : 'Refresh',
    tooltip : 'Manual Refresh (Auto-refreshes every 5 minutes)',
    iconCls : 'refresh',
    handler : reloadBackupAlerts
    }]
    });

    tabBackupAlerts = new Ext.Panel({
    id : 'tabBackupAlerts',
    title : 'Backup Alerts',
    closable : true,
    width: 400,
    height: 400,
    items : [egpBackupAlerts]
    });

    dsBackupAlerts.load();
    };


  • Please post your fixed code so the next guy coming across your thread can benefit.


  • First, you have an extra unneeded nested panel; the gridPanel should be the actual tabPanel item. Then im not sure that its correct to be adding the tab in the store's load event, rather you should add (and activate if desired) the tab to the tabPanel, then load the store.
    There also should be no need for sizes within the tabs if you are intending on using all available space.


  • var tabMain; // Main application tab panel
    var dsBackupAlerts;
    var colmodBackupAlerts;
    var egpBackupAlerts;
    var tabBackupAlerts;

    var openBackupAlertTab = function() {
    dsBackupAlerts = new Ext.data.Store({
    proxy : new Ext.data.HttpProxy({
    url : 'json_rdbms_backup_alerts.py',
    method : 'POST'
    }),
    reader : new Ext.data.JsonReader({
    id : 'id',
    root : 'rows'
    },['id', 'database', 'sched']),
    });

    colmodBackupAlerts = new Ext.grid.ColumnModel([{
    header : 'Database',
    readOnly : true,
    dataIndex : 'database',
    width : 150,
    hidden : false
    }, {
    header : 'Schedule',
    readOnly : true,
    dataIndex : 'sched',
    width : 60,
    hidden : false
    }]);
    colmodBackupAlerts.defaultSortable = true;

    egpBackupAlerts = new Ext.grid.EditorGridPanel({
    id : 'egpBackupAlerts',
    store : dsBackupAlerts, // the datastore is defined here
    cm : colmodBackupAlerts, // the columnmodel is defined here
    enableColLock : false,
    clicksToEdit : 1,
    autoScroll : true,
    selModel : new Ext.grid.RowSelectionModel({
    singleSelect : false
    }),
    tbar : [{
    text : 'Refresh',
    tooltip : 'Manual Refresh (Auto-refreshes every 5 minutes)',
    iconCls : 'refresh',
    handler : reloadBackupAlerts
    }]
    });

    tabMain.add(egpBackupAlerts);
    tabMain.activate('egpBackupAlerts');
    dsBackupAlerts.load();
    };


  • Thanks, I took all your advice, and now it works just as I want. And my code is shorter :D

    Thanks for getting me past that point.







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about Data only displays on second load , Please add it free.

    edit