Sep 01, 2012, 10:34 AM
menupanel automatically removes menuitem on click
Hi all,
Create menupanel and menuitem dynamically. It's working in version 1.x but in version 2.0 menupanel automatically removes menuitem on click.
Code below
Create menupanel and menuitem dynamically. It's working in version 1.x but in version 2.0 menupanel automatically removes menuitem on click.
Code below
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
var mp = new Ext.Net.MenuPanel
{
ID = "mp3",
Title = "menupanel",
SaveSelection = false
};
Ext.Net.MenuItem mi1 = new Ext.Net.MenuItem
{
ID = "test1",
Text = "menuitem 1"
};
mi1.Listeners.Click.Handler = "addTab(#{TabPanel1},'test1', 'https://examples1.ext.net', this);";
mp.Menu.Items.Add(mi1);
Ext.Net.MenuItem mi2 = new Ext.Net.MenuItem
{
ID = "test2",
Text = "menuitem 2"
};
mi2.Listeners.Click.Handler = "addTab(#{TabPanel1},'test2', 'https://examples2.ext.net', this);";
mp.Menu.Items.Add(mi2);
this.WestPanel.Items.Add(mp);
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Adding Tabs On The Fly - Ext.NET Examples</title>
<link rel="stylesheet" type="text/css" href="./resources/css/examples.css" />
<ext:XScript runat="server">
<script type="text/javascript">
var addTab = function (tabPanel, id, url, menuItem) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id : id,
title : url,
closable : true,
menuItem : menuItem,
loader : {
url : url,
renderer : "frame",
loadMask : {
showMask : true,
msg : "Loading " + url + "..."
}
}
});
}
tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel ID="NorthPanel"
runat="server"
Region="North"
Split="false"
Height="64"
Border="False"
Layout="VBoxLayout">
<Defaults>
<ext:Parameter Name="margins" Value="0 0 0 0" Mode="Value" />
</Defaults>
<LayoutConfig>
<ext:VBoxLayoutConfig Padding="0" Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="AppTitle" runat="server" Flex="1" border="false" cls="topheader" Height="32"
Html="<div class='api-title'>APP Title</div>" />
</Items>
</ext:Panel>
<ext:Panel ID="WestPanel"
runat="server"
Title="Module Explorer"
Region="West"
Layout="Accordion"
Width="225"
MinWidth="225"
MaxWidth="325"
Split="true"
Collapsible="true"
CollapseMode="Mini"
hideCollapseTool="false"
margins="5 0 14 5"
cmargins="5 5 14 5">
<Items>
<ext:MenuPanel
ID="MenuPanel1"
Title="Adding tab"
runat="server"
Width="200">
<Menu runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Ext.NET">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', 'http://www.ext.net', this);" />
</Listeners>
</ext:MenuItem>
<ext:MenuSeparator />
<ext:MenuItem ID="MenuItem2" runat="server" Text="Ext.NET forums">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idGgl', 'http://forums.ext.net', this);" />
</Listeners>
</ext:MenuItem>
<ext:MenuSeparator />
<ext:MenuItem ID="MenuItem3" runat="server" Text="Sencha">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idExt', 'http://www.sencha.com', this);" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
<ext:Panel ID="CenterPanel"
runat="server"
Region="center"
Split="false"
Border="false"
Collapsible="false"
Layout="FitLayout"
margins="5 5 14 0">
<Items>
<ext:TabPanel
ID="TabPanel1"
runat="server"
Region="Center"
margins="0 0 0 0">
<Items>
<ext:Panel ID="homePanel" runat="server" Title="Home" Border="false" Padding="20" AutoScroll="true" IconCls="home"
Html="<h1>menupanel automatically removes after clicked</h1>"
/>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
