[CLOSED] Context Menu popup issue

  1. #1

    [CLOSED] Context Menu popup issue

    Support,

    My issue is that when a context opens, if you click to close a submenu, you cannot reopen it unless you move the mouse in an out.

    see example below.
    to reproduce.
    1. right click on grid
    2. move the mouse over the word "test" and wait for the submenu to appear
    3. When the "Choose an option" submenu appears, click once (dont move the mouse). we see the submenu disappears.
    4. Now click again and it should be expected that the submenu will reappear. However, it does not and there is no way to get the submenu to appear without moving the mouse out of the control and back in.

    Thanks,
    /Z

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Menu bug</title>
       
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
    
    
            
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
    
    
                    <ext:GridPanel 
                        ID="GridPanel1" 
                        runat="server" 
                        Title="Test"   
                        EmptyText="test"    
                        ColumnLines="true"          
                        ContextMenuID="MenuRightClick"        
                        Layout="FitLayout">
                            <Store>
                            <ext:Store ID="Store1" runat="server" AutoLoad="false">
                                <Proxy>
                                    <ext:AjaxProxy Url="/ta/Support/test">
                                        <ActionMethods READ="GET" />
                                        <Reader>
                                            <ext:JsonReader IDProperty="id" RootProperty="data" TotalProperty="total"/>
                                        </Reader>
                                    </ext:AjaxProxy>
                                </Proxy>
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="TaskID">
                                        <Fields>
                                            <ext:ModelField Name="ProjectID" Type="Int" />
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="TaskID" Type="Int" />
                                            <ext:ModelField Name="Description" />
                                            <ext:ModelField Name="Estimate" Type="Int" />
                                            <ext:ModelField Name="Rate" Type="Float" />
                                            <ext:ModelField Name="Cost" Type="Float" />
                                            <ext:ModelField Name="Due" Type="Date" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Listeners>
                                    <Load Handler="Ext.net.Mask.show();" Delay="5000" />
                                </Listeners>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1"
                                    runat="server"
                                    TdCls="task"
                                    Text="Task"
                                    Sortable="true"
                                    DataIndex="Description"
                                    Hideable="false"
                                    Width="300">
                                </ext:Column>
                         
                                <ext:Column ID="Column2" runat="server" Text="Project" DataIndex="Name" Width="180" />
                         
                                <ext:DateColumn ID="DateColumn1"
                                    runat="server"
                                    Width="130"
                                    Text="Due Date"
                                    Sortable="true"
                                    DataIndex="Due"
                                    Format="MM/dd/yyyy">
                                </ext:DateColumn>
     
                                <ext:Column ID="Column3"
                                    runat="server"  
                                    Width="130"
                                    Text="Estimate"
                                    Sortable="true"
                                    DataIndex="Estimate">
                                </ext:Column>
                         
                                <ext:Column ID="Column4"
                                    runat="server"
                                    Width="130"
                                    Text="Rate"
                                    Sortable="true"
                                    DataIndex="Rate">
                                </ext:Column>
                         
                                <ext:Column
                                    runat="server"
                                    Width="130"
                                    ID="Cost"
                                    Text="Cost"
                                    Sortable="false"
                                    Groupable="false"
                                    DataIndex="Cost">
                                </ext:Column>
                            </Columns>                
                        </ColumnModel>           
                        <View>
                            <ext:GridView ID="GridView7" runat="server" StripeRows="true" EmptyText="No Data"/>
                        </View>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                        </SelectionModel>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
    
    
            <ext:Menu ID="MenuRightClick" runat="server">
                <Listeners>    
                    <Show Handler="Ext.QuickTips.getQuickTip().hide();" />
                </Listeners>
                <Items>
                    <ext:MenuItem ID="test" Icon="Clock"  runat="server" Text="test" HideOnClick="false">
                        <Menu>
                            <ext:Menu ID="test4" runat="server">
                                <Items>
                                    <ext:Label ID="test44" runat="server" Html="<b class='menu-title'>Choose a Option</b>" />
                                    <ext:CheckMenuItem ID="sdfdf" runat="server" Icon="CalendarStar" Text="sdfsdf" Group="theme">
                                        <Listeners>
                                            <Click Handler="alert('test');" />
                                        </Listeners>
                                    </ext:CheckMenuItem>
                                </Items>
                            </ext:Menu>
                        </Menu>
                    </ext:MenuItem>
    
    
                </Items>
            </ext:Menu>
    
    
        </form>
      </body>
    </html>
  2. #2
    Hello!

    If you want it to just toggle the menu when you click out, I'm afraid this is tricky and fail-prone. When you click outside a submenu, wherever that is, the submenu loses focus and that makes it to vanish.

    But you may be okay with the following approach:

    <Listeners>
        <Click Handler="item.expandMenu();" />
    </Listeners>
    On your Test menu item. Notice this relies on a private method from menu items and may be unavailable in next Ext.NET versions or even in updates between the same version (if ExtJS removes this method). Well, but probably if they remove this they will probably be adding something similar for the same end.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Not optimal, but it passes muster for now. can you please file a defect for this?
    thanks,
    /Z
  4. #4
    Hello!

    I've just logged issue #1337 as a feature request to natively support click toggling of submenus.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [OPEN] [#185] TreePanel context menu issue
    By bogc in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 12, 2013, 4:33 AM
  2. Replies: 1
    Last Post: Jan 12, 2013, 4:30 AM
  3. Replies: 0
    Last Post: Mar 29, 2012, 12:50 PM
  4. [CLOSED] Tab Context menu help
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 31, 2011, 5:08 PM
  5. [CLOSED] context menu
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 07, 2009, 6:06 AM

Posting Permissions