CODEWITHSUNDEEP
extjstabspanel
Armaan
Armaan

Reputation: 205

Updating html text within tabpanel in ExtJS

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.sstatic.net/yrwt6.png

Upvotes: 1

Views: 4120

Answers (2)

Armaan
Armaan

Reputation: 205

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

Upvotes: 3

Jamie Sutherland
Jamie Sutherland

Reputation: 2790

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.

Upvotes: 4

Related Questions