[CLOSED] Menu closes on DateField trigger click

Hi,

I have a PropertyGrid inside a Menu. One field in the PropertyGrid has a DateField as the editor. When clicking on the datepicker button of the DateField, the menu closes. Here is an example:

Code:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Button runat="server" Text="Open Menu"> <Listeners> <Click Handler="Menu1.showAt(e.getXY());" /> </Listeners> </ext:Button> <ext:Menu ID="Menu1" runat="server"> <Items> <ext:MenuItem runat="server" Text="Test Menu"> <Menu> <ext:Menu runat="server"> <Items> <ext:PropertyGrid runat="server" Width="300" AutoHeight="true"> <Source> <ext:PropertyGridParameter Name="Test"> <Editor> <ext:DateField runat="server" /> </Editor> </ext:PropertyGridParameter> </Source> </ext:PropertyGrid> </Items> </ext:Menu> </Menu> </ext:MenuItem> </Items> </ext:Menu> </form> </body> </html>

Steps to reproduce:

1. Load example
2. Click on "Open Menu" button
3. Mouse over "Test Menu"
4. Click in "Test" field
5. Click on datepicker button

You will notice that the menu (and the PropertyGrid inside it) closes when you open the datepicker.

Thanks

Hi,

Here was a similar problem:
http://forums.ext.net/showthread.php?14757

I've prepared an example basing on the example from that thread.

Example

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 runat="server"> <title>Ext.Net Example</title> <script type="text/javascript"> var onRender = function (df) { Ext.fly(df.trigger).on("mousedown", function (e) { Menu2.on("beforehide", returnFalse); (function () { this.un("beforehide", returnFalse); }).defer(250, Menu2); Menu1.on( "beforehide", returnFalse, null, { single: true } ); }); }; var returnFalse = function () { return false; }; </script> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Button runat="server" Text="Open Menu"> <Listeners> <Click Handler="Menu1.showAt(e.getXY());" /> </Listeners> </ext:Button> <ext:Menu ID="Menu1" runat="server"> <Items> <ext:MenuItem runat="server" Text="Test Menu"> <Menu> <ext:Menu ID="Menu2" runat="server"> <Items> <ext:PropertyGrid runat="server" Width="300" AutoHeight="true"> <Source> <ext:PropertyGridParameter Name="Test"> <Editor> <ext:DateField runat="server"> <Listeners> <Render Handler="onRender(this);" /> </Listeners> </ext:DateField> </Editor> </ext:PropertyGridParameter> </Source> </ext:PropertyGrid> </Items> </ext:Menu> </Menu> </ext:MenuItem> </Items> </ext:Menu> </form> </body> </html>

Here is another solution, much more simple. (I just forgot about the allowOtherMenus config option).

Example

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 runat="server"> <title>Ext.Net Example</title> <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" /> <script type="text/javascript"> var myMenu = new Ext.menu.DateMenu({ hideOnClick : false, focusOnSelect : false, allowOtherMenus : true }); </script> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Button runat="server" Text="Open Menu"> <Listeners> <Click Handler="Menu1.showAt(e.getXY());" /> </Listeners> </ext:Button> <ext:Menu ID="Menu1" runat="server"> <Items> <ext:MenuItem runat="server" Text="Test Menu"> <Menu> <ext:Menu ID="Menu2" runat="server"> <Items> <ext:PropertyGrid runat="server" Width="300" AutoHeight="true"> <Source> <ext:PropertyGridParameter Name="Test"> <Editor> <ext:DateField runat="server" AllowOtherMenus="true"> <CustomConfig> <ext:ConfigItem Name="menu" Value="myMenu" /> </CustomConfig> </ext:DateField> </Editor> </ext:PropertyGridParameter> </Source> </ext:PropertyGrid> </Items> </ext:Menu> </Menu> </ext:MenuItem> </Items> </ext:Menu> </form> </body> </html>

Hi,

Thanks for the solution to the issue with the DateField. I have the same issue with a MultiCombo now. Example:

Code:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Button runat="server" Text="Open Menu"> <Listeners> <Click Handler="Menu1.showAt(e.getXY());" /> </Listeners> </ext:Button> <ext:Menu ID="Menu1" runat="server"> <Items> <ext:MenuItem runat="server" Text="Test Menu"> <Menu> <ext:Menu runat="server"> <Items> <ext:PropertyGrid runat="server" Width="300" AutoHeight="true"> <Source> <ext:PropertyGridParameter Name="Test"> <Editor> <ext:MultiCombo runat="server"> <Items> <ext:ListItem Text="Test 1" Value="1" /> <ext:ListItem Text="Test 2" Value="2" /> </Items> </ext:MultiCombo> </Editor> </ext:PropertyGridParameter> </Source> </ext:PropertyGrid> </Items> </ext:Menu> </Menu> </ext:MenuItem> </Items> </ext:Menu> </form> </body> </html>

Steps to reproduce:

1. Load example
2. Click on "Open Menu" button
3. Mouse over "Test Menu"
4. Click in "Test" field
5. Click on MultiCombo dropdown.

You will see that the MultiCombo options show up behind the menu and when an item is selected, the menu closes.

Thanks

Well, I don't recoomend to use popup/dropdown component inside menu
Menu listens clicks outside own body and if a click occurs then menu is hidden
DropDown components render own list view inside document.body (outside menu) therefore the menu will be hidden after click (we can do some trick if combo is direct item but if combo inside another widget, like property grid, then we cannot handle such case)

Hi,

I use a property grid inside a menu to be able to "filter" nodes in a tree by right clicking (opening the menu) and entering data in the property grid. TextFields, NumberFields, SpinnerFields & DateFields all work fine in this property grid. It is very important for a ComboBox or MultiCombo to work inside the property grid in the same way as I need to present a list of options to the user for one of the items in the grid.

Is there any workaround for this?

Thanks

What about to move out PropertyGrid from menu? For example, to a <ext:Window>.

Just any workaround can be difficult to implement.