Updating html text within tabpanel in ExtJS

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 : http://i.imgur.com/UM3UD.png

Jamie Sutherland Jamie Sutherland · Accepted Answer · 2012-04-02T15:54:08

Edit: Just read the comments and saw that you've worked it out already!

I'm surprised the tab.update("Processing..."); doesn't work. I've just tried a similar config and used the update method to change the html and it worked fine without leaving the old text. Here's my setup just in case it helps.

xtype: 'tabpanel',
region: 'center',
plain: true,
border: false,
width: 600,
margin: '4 10 2 2',
items: [
{
    xtype: 'panel',
    title: 'Testing',
    id: 'taskpanel',
    html: 'testing'
}
]

Then in the console I ran this to save setting up a button.

Ext.getCmp('taskpanel').update('New Text!');

Worked fine.

Updating html text within tabpanel in ExtJS

2 Answers