Hi Daniil,
I have tried to implement. In "Navigation" thread button control used, but here there is no button control. Instead of button here is "MenuPanel", while running it throwing error at "button.showMenu()" in following code...
<%@ 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 id="Head1" runat="server">
<title>Ext.NET Example</title>
<script type="text/javascript">
var onButtonAfterRender = function (button) {
var el = button.getEl();
button.mon(el, 'mouseenter', onButtonMouseEnter, button);
button.mon(el, 'mouseleave', onButtonMouseLeave, button, { delay: 100 });
};
var onButtonMouseEnter = function () {
var button = this;
button.allowHideMenuOnMouseLeave++;
button.showMenu();
};
var onButtonMouseLeave = function () {
var button = this;
if (--button.allowHideMenuOnMouseLeave === 0) {
button.hideMenu();
}
};
var onMenuAfterRender = function (menu, button) {
var el = menu.getEl(),
scope = { button: button, menu: menu };
menu.mon(el, "mouseenter", onMenuMouseEnter, scope);
menu.mon(el, "mouseleave", onMenuMouseLeave, scope, { delay: 100 });
};
var onMenuMouseEnter = function () {
var button = this.button;
button.allowHideMenuOnMouseLeave++;
console.log("onMenuMouseEnter: " + this.menu.id);
};
var onMenuMouseLeave = function () {
var button = this.button;
console.log("onMenuMouseLeave: " + this.menu.id);
if (--button.allowHideMenuOnMouseLeave === 0) {
button.hideMenu();
}
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="vpReqFields" runat="server" Layout="border">
<Items>
<ext:Panel ID="pnlLeftCtrls" runat="server" Region="Center" Layout="Accordion" Border="false">
<Items>
<ext:Panel ID="pnlCompanyAdmin" runat="server" Title="Title 1" Border="false">
<Items>
<ext:MenuPanel ID="Button1" runat="server" Text="Menu 1" Flex="1">
<CustomConfig>
<ext:ConfigItem Name="allowHideMenuOnMouseLeave" Value="0" Mode="Raw" />
</CustomConfig>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Item 1" />
<ext:MenuItem ID="MenuItem2" runat="server" Text="Sub Menu">
<Menu>
<ext:Menu ID="Menu2" runat="server">
<Items>
<ext:MenuItem ID="MenuItem3" runat="server" Text="Item 1" />
<ext:MenuItem ID="MenuItem4" runat="server" Text="Item 2" />
</Items>
<Listeners>
<AfterRender Handler="onMenuAfterRender(this, Button1);" />
</Listeners>
</ext:Menu>
</Menu>
</ext:MenuItem>
</Items>
<Listeners>
<AfterRender Handler="onMenuAfterRender(this, Button1);" />
</Listeners>
</ext:Menu>
<Listeners>
<AfterRender Fn="onButtonAfterRender" />
</Listeners>
</ext:MenuPanel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlLoanAdmin" runat="server" Title="Title 2" Border="false">
<Items>
<ext:MenuPanel ID="Button2" runat="server" Text="Menu 2" Flex="1">
<CustomConfig>
<ext:ConfigItem Name="allowHideMenuOnMouseLeave" Value="0" Mode="Raw" />
</CustomConfig>
<ext:Menu ID="Menu3" runat="server">
<Items>
<ext:MenuItem ID="MenuItem5" runat="server" Text="Item 1" />
<ext:MenuItem ID="MenuItem6" runat="server" Text="Sub Menu">
<Menu>
<ext:Menu ID="Menu4" runat="server">
<Items>
<ext:MenuItem ID="MenuItem7" runat="server" Text="Item 1" />
<ext:MenuItem ID="MenuItem8" runat="server" Text="Item 2" />
</Items>
<Listeners>
<AfterRender Handler="onMenuAfterRender(this, Button2);" />
</Listeners>
</ext:Menu>
</Menu>
</ext:MenuItem>
</Items>
<Listeners>
<AfterRender Handler="onMenuAfterRender(this, Button2);" />
</Listeners>
</ext:Menu>
<Listeners>
<AfterRender Fn="onButtonAfterRender" />
</Listeners>
</ext:MenuPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>