Jan 09, 2013, 11:33 PM
[FIXED] [#124] [2.x] TreePanel in a menu, in IE 9 clicking repeatedly on a node will hide the menu
This is a weird one. Below there is a sample page. To reproduce:
1. Open the page in IE 9.
2. Click on the 'Tree 1' button to display the tree on the left. The 'Composers' node is expanded
3. Now, click fast on the arrow of the 'Beethoven' node to expand and collapse repeatedly the node (keep clicking fast). Eventually the menu will disappear after a few clicks.
This doesn't happen in FF (17, didn't upgrade yet to 18 due to a bug) and Chrome. In my app it usually happens pretty quickly (it seems random though).
I also added a beforehide handler and it turns out that somehow, in IE9, the element being clicked on (which is a div containing the arrow image and text) is placed outside the menu therefore the !e.getTarget('.' + Ext.baseCSSPrefix + 'menu')) expression is true and the menu is hidden.
These are the two functions at the bottom of the stack.
1. Open the page in IE 9.
2. Click on the 'Tree 1' button to display the tree on the left. The 'Composers' node is expanded
3. Now, click fast on the arrow of the 'Beethoven' node to expand and collapse repeatedly the node (keep clicking fast). Eventually the menu will disappear after a few clicks.
This doesn't happen in FF (17, didn't upgrade yet to 18 due to a bug) and Chrome. In my app it usually happens pretty quickly (it seems random though).
I also added a beforehide handler and it turns out that somehow, in IE9, the element being clicked on (which is a div containing the arrow image and text) is placed outside the menu therefore the !e.getTarget('.' + Ext.baseCSSPrefix + 'menu')) expression is true and the menu is hidden.
These are the two functions at the bottom of the stack.
function anonymous(e, options, fn, scope, ename, dom, wrap, args, X, evtMgr) {
if (!Ext) {
return;
}
e = new X.EventObjectImpl(e, false);
var t = e.target,
result;
(wrap.task && clearTimeout(wrap.task));
wrap.task = setTimeout(function () {
result = fn.call(scope || dom, e, t, options); // <-- this is the function that gets invoked
if (evtMgr.idleEvent.listeners.length) {
evtMgr.idleEvent.fire();
}
}, 10);
return result;
} onMouseDown: function(e) {
var me = this,
active = me.active,
lastShow = me.lastShow;
if (Ext.Date.getElapsed(lastShow) > 50 && active.length > 0 && !e.getTarget('.' + Ext.baseCSSPrefix + 'menu')) {
me.hideAll(); // <-- this is the function that gets invoked to hide the menu
}
},<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
// string[][] data = new string[10][];
//
// for (int i = 0; i < data.Length; i++)
// {
// data[i] = new string[5];
//
// for (int j = 0; j < data[i].Length; j++)
// {
// data[i][j] = string.Format("[{0},{1}]", i+1, j+1);
// }
// }
//
// this.Store1.DataSource = data;
// this.Store1.DataBind();
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var cellSelect = function (grid, record, ceIlndex, textField, ctxMenu) {
var name = grid.columns[ceIlndex].dataIndex,
value = record.get(name);
textField.setValue(value);
ctxMenu.hide();
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h2>Tree Panel in menu</h2>
<ext:Window
ID="Window1"
runat="server"
Title="Hello World"
Icon="Application"
Height="185"
Width="350"
BodyStyle="background-color: #fff;"
BodyPadding="5"
Modal="true">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server" Width="500">
<Items>
<ext:Button ID="Button5" runat="server" Text="Tree 1">
<Menu>
<ext:Menu ID="Menu3" runat="server">
<%-- <Listeners>--%>
<%-- <Show Handler="this.lockedHide = true;" />--%>
<%-- <BeforeHide Handler="return !this.lockedHide;" />--%>
<%-- <AfterRender Handler="var menu = this;--%>
<%-- Ext.EventManager.on(window, 'mouseup', function (e) {--%>
<%-- var t = Ext.fly(e.getTarget());--%>
<%-- if (!(t.parent('#' + menu.id) || t.parent('.x-grid-editor') || t.parent('.x-layer'))) {--%>
<%-- menu.lockedHide = false;--%>
<%-- menu.hide();--%>
<%-- }--%>
<%-- });" />--%>
<%-- </Listeners>--%>
<Items>
<ext:TreePanel
ID="TreePanel1"
runat="server"
Width="300"
Height="350"
Icon="BookOpen"
Title="Catalog"
UseArrows="true"
Animate="False"
AutoScroll="true">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:Node Text="Composers" Expanded="true">
<Children>
<ext:Node Text="Beethoven" Icon="UserGray" Qtip="Beethoven">
<Children>
<ext:Node Text="Concertos" Qtip="Concertos">
<Children>
<ext:Node Text="No. 1 - C" Icon="Music" Leaf="true" Qtip="No. 1 - C" />
<ext:Node Text="No. 2 - B-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - G Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 5 - E-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Quartets">
<Children>
<ext:Node Text="Six String Quartets" Icon="Music" Leaf="true" />
<ext:Node Text="Three String Quartets" Icon="Music" Leaf="true" />
<ext:Node Text="Grosse Fugue for String Quartets" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Sonatas">
<Children>
<ext:Node Text="Sonata in A Minor" Icon="Music" Leaf="true" />
<ext:Node Text="sonata in F Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Symphonies">
<Children>
<ext:Node Text="No. 1 - C Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - D Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - E-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - B-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 5 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 6 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 7 - A Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 8 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 9 - D Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Brahms" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="Violin Concerto" Icon="Music" Leaf="true" />
<ext:Node Text="Double Concerto - A Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 1 - D Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 2 - B-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Quartets">
<Children>
<ext:Node Text="Piano Quartet No. 1 - G Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 2 - A Major" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 3 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 3 - B-Flat Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Sonatas">
<Children>
<ext:Node Text="Two Sonatas for Clarinet - F Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Two Sonatas for Clarinet - E-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Symphonies">
<Children>
<ext:Node Text="No. 1 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - D Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - E Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Mozart" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="Piano Concerto No. 12" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 17" Icon="Music" Leaf="true" />
<ext:Node Text="Clarinet Concerto" Icon="Music" Leaf="true" />
<ext:Node Text="Violin Concerto No. 5" Icon="Music" Leaf="true" />
<ext:Node Text="Violin Concerto No. 4" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" />
</BottomBar>
<Listeners>
<ItemClick
Handler="#{StatusBar1}.setStatus({text: 'Node Selected: <b>' + record.data.text + '<br />', clear: false});"
/>
<ItemExpand
Handler="#{StatusBar1}.setStatus({text: 'Node Expanded: <b>' + item.data.text + '<br />', clear: false});"
Buffer="30"
/>
<ItemCollapse
Handler="#{StatusBar1}.setStatus({text: 'Node Collapsed: <b>' + item.data.text + '<br />', clear: false});"
Buffer="30"
/>
</Listeners>
</ext:TreePanel>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="Tree 2">
<Menu>
<ext:Menu ID="Menu1" runat="server">
<%-- <Listeners>--%>
<%-- <Show Handler="this.lockedHide = true;" />--%>
<%-- <BeforeHide Handler="return !this.lockedHide;" />--%>
<%-- <AfterRender Handler="var menu = this;--%>
<%-- Ext.EventManager.on(window, 'mouseup', function (e) {--%>
<%-- var t = Ext.fly(e.getTarget());--%>
<%-- if (!(t.parent('#' + menu.id) || t.parent('.x-grid-editor') || t.parent('.x-layer'))) {--%>
<%-- menu.lockedHide = false;--%>
<%-- menu.hide();--%>
<%-- }--%>
<%-- });" />--%>
<%-- </Listeners>--%>
<Items>
<ext:TreePanel
ID="TreePanel2"
runat="server"
Width="300"
Height="350"
Icon="BookOpen"
Title="Catalog"
UseArrows="true"
Animate="False"
AutoScroll="true">
<TopBar>
<ext:Toolbar ID="Toolbar3" runat="server">
<Items>
<ext:Button ID="Button4" runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button6" runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:Node Text="Composers" Expanded="true">
<Children>
<ext:Node Text="Beethoven" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="No. 1 - C" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - B-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - G Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 5 - E-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Quartets">
<Children>
<ext:Node Text="Six String Quartets" Icon="Music" Leaf="true" />
<ext:Node Text="Three String Quartets" Icon="Music" Leaf="true" />
<ext:Node Text="Grosse Fugue for String Quartets" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Sonatas">
<Children>
<ext:Node Text="Sonata in A Minor" Icon="Music" Leaf="true" />
<ext:Node Text="sonata in F Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Symphonies">
<Children>
<ext:Node Text="No. 1 - C Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - D Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - E-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - B-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 5 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 6 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 7 - A Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 8 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 9 - D Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Brahms" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="Violin Concerto" Icon="Music" Leaf="true" />
<ext:Node Text="Double Concerto - A Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 1 - D Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 2 - B-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Quartets">
<Children>
<ext:Node Text="Piano Quartet No. 1 - G Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 2 - A Major" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 3 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 3 - B-Flat Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Sonatas">
<Children>
<ext:Node Text="Two Sonatas for Clarinet - F Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Two Sonatas for Clarinet - E-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Symphonies">
<Children>
<ext:Node Text="No. 1 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - D Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - E Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Mozart" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="Piano Concerto No. 12" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 17" Icon="Music" Leaf="true" />
<ext:Node Text="Clarinet Concerto" Icon="Music" Leaf="true" />
<ext:Node Text="Violin Concerto No. 5" Icon="Music" Leaf="true" />
<ext:Node Text="Violin Concerto No. 4" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
<BottomBar>
<ext:StatusBar ID="StatusBar2" runat="server" AutoClear="1500" />
</BottomBar>
<Listeners>
<ItemClick
Handler="#{StatusBar1}.setStatus({text: 'Node Selected: <b>' + record.data.text + '<br />', clear: false});"
/>
<ItemExpand
Handler="#{StatusBar1}.setStatus({text: 'Node Expanded: <b>' + item.data.text + '<br />', clear: false});"
Buffer="30"
/>
<ItemCollapse
Handler="#{StatusBar1}.setStatus({text: 'Node Collapsed: <b>' + item.data.text + '<br />', clear: false});"
Buffer="30"
/>
</Listeners>
</ext:TreePanel>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Window>
</body>
</html>
Last edited by fabricio.murta; Apr 26, 2016 at 10:27 PM.
