Thanks for your reply, Daniil! Please execute the code sample below in IE11 reproducing the simplified setup of my application. Set MenuTestMain.aspx as the startup page in VS. After hitting the button in the banner area, hover over the newly added sub menu and observe that the code breaks within the ExtJS library.
MenuTestMain.aspx
<%@ Page Language="C#" %>
<%@ 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>Ext.Net 3.x</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
<script type="text/javascript">
var onAddMenu = function () {
var tab = App.TabPanel1.addTab({
id: "Tab1",
title: "New Tab",
closable: false,
loader: {
url: "MenuTestChild.aspx",
renderer: "frame",
noCache: true,
loadMask: {
showMask: true,
msg: "Loading..."
},
scripts: true
}
}, 0);
};
var onDocumentReady = function () {
App.MenuItem2.setDisabled(true);
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
<Listeners>
<DocumentReady Fn="onDocumentReady"></DocumentReady>
</Listeners>
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:Toolbar runat="server" Region="North" Height="60">
<Items>
<ext:ToolbarTextItem runat="server" Text="Accordion Layout Example"></ext:ToolbarTextItem>
<ext:Button runat="server" Text="Add Tab & Menu">
<Listeners>
<Click Fn="onAddMenu"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
<ext:Panel ID="Panel1" runat="server" Region="West" Width="240" Header="true" Title="Main Menu"
Layout="AccordionLayout" Collapsible="true" CollapseMode="Mini" Split="false" MaxWidth="240">
<Items>
<ext:MenuPanel ID="MenuPanel1" ItemID="MenuPanel1" runat="server" AutoScroll="true"
Title="Menu Panel 1" Border="false">
<Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" ItemID="MenuItem1" runat="server"
Text="Menu Item 1">
</ext:MenuItem>
<ext:MenuItem ID="MenuItem2" ItemID="MenuItem2" runat="server"
Text="Menu Item 2">
<Menu>
<ext:Menu ID="SubMenu1" runat="server">
<Items>
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" LayoutOnTabChange="true" HideMode="Display" EnableTabScroll="true">
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
MenuTestChild.aspx
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
private object[] TestData
{
get
{
var now = DateTime.Now;
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, now },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
};
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
DataBind();
}
}
private void DataBind()
{
this.Store1.DataSource = this.TestData;
this.Store1.DataBind();
}
protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
{
var store = sender as Store;
if (store == null) return;
var dataSource = store.DataSource;
if (dataSource != null) return;
DataBind();
}
</script>
<script type="text/javascript">
var refreshHandler = function () {
var grid = this.up('gridpanel');
Ext.net.Mask.show({
el: grid
});
grid.getStore().reload({
callback: function () {
Ext.net.Mask.hide();
}
});
};
var onDocumentReady = function () {
var topWindow = window.parent;
var config = {
id: "MenuSubItem1",
text: "Menu Sub Item 1"
};
var subMenu = topWindow.Ext.getCmp("SubMenu1");
var menuItem = topWindow.Ext.getCmp("MenuItem2");
subMenu.add(new Ext.menu.Item(config));
menuItem.setDisabled(false);
};
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Local Data Paging - Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
<Listeners>
<DocumentReady Fn="onDocumentReady"></DocumentReady>
</Listeners>
</ext:ResourceManager>
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Flex="1">
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="false" RemotePaging="false" AutoLoad="true" PageSize="10" OnReadData="Store1_ReadData">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="company">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
<Editor>
<ext:TextField ID="TextField2" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
<ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
Format="HH:mm:ss" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" RefreshHandler="refreshHandler">
<Items>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>