Jul 14, 2009, 1:08 PM
[CLOSED] Insert tab at Position (n) on TabPanel
When creating a new tab in my tab panel, I'd like to have it always open/insert the tab directly to the right of the active tab. It seems the default behaviour is to always open/insert the tab at the far right/end of the tabs. Is there a way to add a new tab and then have it appear directly to the right of the ActiveTab (similar to how the IE browser handles tabs)?
<%@ Page Language="vb"%>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function addTab() {
var index = TabPanel1.items.length;
var title = "Tab" + index;
var id = "Tab" + index;
var tab = TabPanel1.add({
id: id,
title: title,
closable: true,
showIFrameMask: true
});
TabPanel1.setActiveTab(tab);
tab.loadIFrame('http://www.ext.net');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" InitScriptMode="Inline">
</ext:ScriptManager>
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West Collapsible="true" Split="false">
</West>
<Center>
<ext:Panel ID="Panel7" runat="server" AutoScroll="true">
<Body>
<ext:FitLayout ID="FitLayout2" runat="server">
<ext:TabPanel ID="TabPanel1" Border="false" runat="server" ActiveTabIndex="0" Plain="true" LayoutOnTabChange="true" EnableTabScroll="true">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarButton Text="New Tab" Icon="Add">
<Listeners>
<Click Handler="addTab();" />
</Listeners>
</ext:ToolbarButton>
</Items>
</ext:Toolbar>
</TopBar>
<Tabs>
<ext:Tab ID="Tab0" Title="Tab0" runat="server" Closable="true" ShowIFrameMask="true" AutoScroll="true">
<AutoLoad Url="http://yahoo.com"></AutoLoad>
</ext:Tab>
<ext:Tab ID="Tab1" Title="Tab1" runat="server" Closable="true" ShowIFrameMask="true" AutoScroll="true">
<AutoLoad Url="http://google.com"></AutoLoad>
</ext:Tab>
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Body>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
</form>
</body>
</html>
Last edited by geoffrey.mcgill; Feb 22, 2011 at 4:32 AM.
