Dec 07, 2009, 12:35 PM
[CLOSED] Update TabPanel content without activating
Hi,
I need an urgent help on this... In the following example, I add a tab on click of button, but do not activate it.
Now in FF or IE, if I update body the panel inside tab with
"Ext.getCmp("panel4").body.update("Dummy");
I get an error saying panel 4 not defined.
But if I once activate the Tab, and then update the panel, I have no issues. I need to update content without activating the tab.
If I check in firebug, under DOM tab, I can see panel4 in the list... But it does'nt update the content...
Also, this happens only when u have newly added, if once its activated, then I can update even when other tab is active.
I need an urgent help on this... In the following example, I add a tab on click of button, but do not activate it.
Now in FF or IE, if I update body the panel inside tab with
"Ext.getCmp("panel4").body.update("Dummy");
I get an error saying panel 4 not defined.
But if I once activate the Tab, and then update the panel, I have no issues. I need to update content without activating the tab.
If I check in firebug, under DOM tab, I can see panel4 in the list... But it does'nt update the content...
Also, this happens only when u have newly added, if once its activated, then I can update even when other tab is active.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
var createTab = function () {
tab = chatTabs.add({
id: 'tab5',
title: 'tab5',
autoScroll: true,
closable: true,
bodyStyle: { "position": "relative" },
items: [{ id: 'panel4', html: 'Panel1', xtype: 'panel',border:false, style: {
position: 'absolute',
bottom: '5px',
left: '5px'
}
} ]
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:resourcemanager runat="server" ID="scp1" DirectMethodNamespace="DM" >
</ext:resourcemanager>
<ext:Button ID="btn" Text="Add Tab" runat="server">
<Listeners>
<Click Handler="createTab();" />
</Listeners>
</ext:Button>
<ext:TabPanel runat="server" Width="400" Height="400" ID="chatTabs">
<items>
<ext:Panel runat="server" Title="Title1"></ext:Panel>
<ext:Panel ID="Panel1" runat="server" Title="Title1">
<Items>
<ext:Panel runat="server" TitleCollapse="true" StyleSpec="position:absolute;bottom:5px;left:5px;">
<Content>Hi</Content>
</ext:Panel>
</Items>
</ext:Panel>
</items>
</ext:TabPanel>
</form>
</body>
</html>
