Question

I have a tab panel that gets populated with a grid when a button is clicked. Before that grid is displayed I want the panel to inform the user about clicking the button to see the results. When the user does click on the button i want to replace that html text with another one, but am facing problems doing so.

    xtype: 'tabpanel',
    id: 'results-tabpanel',
    activeTab: 0,
    autoScroll: true,
    border: false,
    layout: { type: 'fit', align: 'stretch' },
    items: [{
             title: 'Results',
             id: 'result-tab',
             html: "Run a query to see results"
             //autoEl: {html: "Run a query to see results",border:false }
            },
            {
             title: 'Transactions',
             html: "Run a query to see transactions"
           }]

In the event handler for the button i have:

    var tab = Ext.getCmp("result-tab");
    tab.initialConfig.html = "Processing...";
    //tab.update("Processing...");

The initialConfig is because thats where i found the html to be lying in through firebug. I tried using the autoEl option and then doing an update with the message but it just adds on to the previous html : https://i.stack.imgur.com/yrwt6.png

Answer 1

Instead of the “tab.initialConfig.html ” i just used tab.body.update(“Processing…”) and that fixed the problem. autoEl is not required.