[CLOSED] Menu closes on DateField trigger click

  1. #1

    [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:

    <!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
    Last edited by geoffrey.mcgill; Sep 28, 2011 at 3:46 AM. Reason: [CLOSED]
  2. #2
    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

    <%@ 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>
  3. #3
    Here is another solution, much more simple. (I just forgot about the allowOtherMenus config option).

    Example
    <%@ 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>
  4. #4
    Hi,

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

    <!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
  5. #5
    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)
  6. #6
    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
  7. #7
    What about to move out PropertyGrid from menu? For example, to a <ext:Window>.

    Just any workaround can be difficult to implement.

Similar Threads

  1. [CLOSED] ext:NumberField and ext:DateField: Add trigger
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 03, 2012, 8:54 PM
  2. [CLOSED] DateField - Hide trigger and date picker no-show
    By thchuong in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 12, 2011, 2:02 PM
  3. How do i trigger a postback on Tab Click?
    By Fabrizio in forum 1.x Help
    Replies: 0
    Last Post: Jul 22, 2010, 11:20 AM
  4. Desktop menu and trigger
    By Richardt in forum 1.x Help
    Replies: 1
    Last Post: Jun 03, 2010, 1:14 PM
  5. [CLOSED] [1.0] DateField give "this.trigger is undefined"
    By rcaunt in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 16, 2010, 1:46 PM

Posting Permissions