Jul 09, 2013, 1:38 PM
Adding Tabs From MasterPage
Hi,
I have created a navigation menu using MenuPanel in a master page. I wonder if i can click the menu items to add tabs which shows the child pages?
Below is my code:
MasterPage:
<%@ 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">
<script runat="server">
</script>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="background-color:White">
<form id="form1" runat="server">
<table width="100%">
<tr><td style="width: 82px" align="left" valign="top">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:MenuPanel ID="MenuPanel1" runat="server" Height="670" Title="Menu"
Width="185" >
<menu Layout="VBoxLayout">
<Items>
<ext:MenuItem ID="mnuHome" runat="server" Text="Home" DirectClickUrl="~/Webpages/Home.aspx" >
<Listeners>
<Click Handler="addTab(#{Mainpnl},'idHome', '~/Webpages/Home.aspx');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="mnuInfo" runat="server" Text="My Info" DirectClickUrl="~/Webpages/Grid.aspx" />
</Items>
</menu>
</ext:MenuPanel>
<td align="left" valign="top">
<asp:ContentPlaceHolder ID="CpBody" runat="server">
<br />
<ext:TabPanel ID="Mainpnl" runat="server" Border="true" RegisterAllResources="true"> </ext:TabPanel>
</asp:ContentPlaceHolder>
</td></tr>
</table> </div>
</form>
</body>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript" >
var addTab = function (tabPanel, id, url) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: url,
closable: true,
autoLoad: {
showMask: true,
url: url,
mode: "iframe",
maskMsg: "Loading " + url + "..."
}
});
tab.on("activate", function () {
var item = MenuPanel1.menu.items.get(id + "_item");
if (item) {
MenuPanel1.setSelection(item);
}
}, this);
}
tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
And the Child Page:
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<%--<asp:Content ID="Content2" ContentPlaceHolderID="CpHead" Runat="Server">
</asp:Content>--%>
<asp:Content ID="MainContent" ContentPlaceHolderID="CpBody" Runat="Server">
<div style="font-size:x-large">
<ext:Label ID="lblGreet" runat="server" Text="" Visible="true" /></div>
</asp:Content>
but when i click the Home menu it throws an error [Javascript error:getComponent is null or undefined] and when i check tabpanel is null..
could you please help me resolve this?
I have created a navigation menu using MenuPanel in a master page. I wonder if i can click the menu items to add tabs which shows the child pages?
Below is my code:
MasterPage:
<%@ 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">
<script runat="server">
</script>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body style="background-color:White">
<form id="form1" runat="server">
<table width="100%">
<tr><td style="width: 82px" align="left" valign="top">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:MenuPanel ID="MenuPanel1" runat="server" Height="670" Title="Menu"
Width="185" >
<menu Layout="VBoxLayout">
<Items>
<ext:MenuItem ID="mnuHome" runat="server" Text="Home" DirectClickUrl="~/Webpages/Home.aspx" >
<Listeners>
<Click Handler="addTab(#{Mainpnl},'idHome', '~/Webpages/Home.aspx');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="mnuInfo" runat="server" Text="My Info" DirectClickUrl="~/Webpages/Grid.aspx" />
</Items>
</menu>
</ext:MenuPanel>
<td align="left" valign="top">
<asp:ContentPlaceHolder ID="CpBody" runat="server">
<br />
<ext:TabPanel ID="Mainpnl" runat="server" Border="true" RegisterAllResources="true"> </ext:TabPanel>
</asp:ContentPlaceHolder>
</td></tr>
</table> </div>
</form>
</body>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript" >
var addTab = function (tabPanel, id, url) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: url,
closable: true,
autoLoad: {
showMask: true,
url: url,
mode: "iframe",
maskMsg: "Loading " + url + "..."
}
});
tab.on("activate", function () {
var item = MenuPanel1.menu.items.get(id + "_item");
if (item) {
MenuPanel1.setSelection(item);
}
}, this);
}
tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
And the Child Page:
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<%--<asp:Content ID="Content2" ContentPlaceHolderID="CpHead" Runat="Server">
</asp:Content>--%>
<asp:Content ID="MainContent" ContentPlaceHolderID="CpBody" Runat="Server">
<div style="font-size:x-large">
<ext:Label ID="lblGreet" runat="server" Text="" Visible="true" /></div>
</asp:Content>
but when i click the Home menu it throws an error [Javascript error:getComponent is null or undefined] and when i check tabpanel is null..
could you please help me resolve this?