Jul 04, 2011, 9:46 AM
dynamic groupTabPanel; tabs not rendering properly
I am trying to dynamically populate a vertical tabPanel (via groupTabPanel) where the number of tabs depend on combobox.
Initially, the groupTabPanel is empty. The tabs are created when user selects an item from the combobox.
The initialization is being handled on Page_Load when the combobox value changes. So far, I haven't made any progress to get the desired behaviour, and I hope someone can help me.
here is the sample I prepared:
Initially, the groupTabPanel is empty. The tabs are created when user selects an item from the combobox.
The initialization is being handled on Page_Load when the combobox value changes. So far, I haven't made any progress to get the desired behaviour, and I hope someone can help me.
here is the sample I prepared:
<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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 runat="server">
<title></title>
<style type="text/css">
.vertical-tabs .x-grouptabs-expand
{
display: none;
}
.vertical-tabs.x-grouptabs-panel .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text
{
font-size: 11px;
padding: 0 2px; /* if you don't expect to use icons for the tabs */
color: #555;
}
</style>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
LoadAttributePanels();
}
protected void cboTabs_Select(object sender, DirectEventArgs e)
{
}
void LoadAttributePanels()
{
center.RemoveAll();
Ext.Net.Panel p;
Ext.Net.GroupTab g;
int n = 0;
int.TryParse(cboTabs.SelectedItem.Text, out n);
for (int i = 0; i < n; i++) {
p = new Ext.Net.Panel("Selected : " + cboTabs.Value);
p.AutoLoad.ShowMask = true;
p.AutoLoad.Mode = LoadMode.IFrame;
p.AutoLoad.Url = "www.google.com";
g = new GroupTab() {
ID = "grp" + i.ToString(),
};
g.Items.Add(p);
g.Render(center, RenderMode.AddTo);
//g.AddTo(center);
}
//center.UpdateContent();
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport runat="server" Layout="Fit">
<Items>
<ext:Panel runat="server">
<AutoLoad ShowMask="true" />
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ComboBox ID="cboTabs" runat="server" Editable="false">
<Items>
<ext:ListItem Text="1" Value="1" />
<ext:ListItem Text="2" Value="2"/>
<ext:ListItem Text="3" Value="3"/>
<ext:ListItem Text="4" Value="4"/>
</Items>
<DirectEvents>
<Select OnEvent="cboTabs_Select" />
</DirectEvents>
</ext:ComboBox>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:GroupTabPanel ID="center" runat="server" Title="GroupTabPanel" Cls="vertical-tabs" />
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by phinoppix; Jul 05, 2011 at 9:04 AM.
Reason: re-edited