Add html content dynamically to TAB

[anirbankundu]

Hi,

I am using ext4js with jquery. I have a Viewport that adds North, East, West,South & Center Panels.

In the center panel, I am adding the tab panel [Ext.tab.Panel]. From a jquery button click I am adding a new tab to the tab panel. I am not putting in the html while the tab is created. I am adding after the TAB is created. I find that when the TAB is rendered on the DOM, no TAB contents are visible. Only when I go to another tab and come back to the newly created tab, the tab content is visible. I am unable to understand why this is happening. The code I am using is :

$('#jquerybutton').bind('click', function () {
var tab = tabs.add({
title: 'Tab ' + (tabs.items.length + 1),
closable: true
});


tabs.setActiveTab(tab);
var tabid = tab.id + '-body';
$('#' + tabid).html("TEST CONTENT");
});

I know I can use the following tab.add({ html: "<div>Test</div>" })
But there are other reasons for which I would have to use the way I have done [I am using knockout js and adding widgets to the tab id dynamically]

Can somebody help me out in this regard. I am stuck for the last 1 day

Thanks,
Anirban

[mitchellsimoens]

If you get the component you want to change the html on, use setHtml method on it. You don't need jQuery at all.