[OPEN] [#1207] [3.2.1] Menu Item Issue

  1. #1

    [OPEN] [#1207] [3.2.1] Menu Item Issue

    See complete example. There are a few issues i see when the right click of the grid brings up the context menu.


    Test case:
    1. load page (no need for store to load)
    2. right click on grid
    3. mouse over the 'test' item and a submenu 'sdsdsd' will appear
    4. click the 'test' menuitem.


    issue #1
    observed: when clicking, the submenu 'sdsdsd' disappear even though it is flagged HideOnClick false
    expected: it shouldnt disappear (though i may not understand the functionality


    issue #2


    5. after you clicked 'test', it disappeared.
    6. now click it again to make the submenu reappear.


    observed: unable to make it reappear untill you mouse out and mouse back and then click again
    expected: clicking should make 'sdsdsd' reappear


    issue #3:
    if i mouse over 'test' and it appears, then clicking on 'test' again should do nothing. it shouldnt make it disappear.


    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 @Z!

    Thanks for the fully running test case, I was able to reproduce your issues, except for this point:

    "observed: unable to make it reappear untill you mouse out and mouse back and then click again"

    The difference here is that clicking is not necessary. I move the mouse out and then back in the menu item, and then the submenu reappears. No click needed. The subsequent click then repeats your issue #1. In other words, moving mouse out and back in in step 6 moves the state back to step 3.

    I also noticed that, depending where you are clicking (the text on the button, the button's border, or button padding/empty area) the submenu reappears when just hovering the mouse out of the button's frame.

    I will investigate it more and get back to you with news about it.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again!

    After further investigation I found an actual problem, that is, if you add the HideOnClick="false" to the CheckMenuItem, the flag is not set by Ext.NET's resulting JavaScript code. So it is not possible to prevent the selection checkbox to hide once you switch it, what may be pretty annoying.

    For this part of the problem, the fix is just adding this inside the ext:CheckMenuItem definition:
    <customconfig>
        <ext:ConfigItem Name="hideOnClick" Value="false" Mode="Raw" />
    </customconfig>
    As for the second part of the problem, the thing is that HideOnClick actuates upon the menuitem, not its lower levels' submenus. That may be undesired in some other situations, when you need to keep the menu but not the submenu. Unfortunately, the Menu does not have an option to prevent it from hiding if it is a submenu and it is the selected one.

    Fortunately, by the other side, there's a simple fix you can add to your menus to address this issue!.. Add the following Listener to your submenu (notice, it is to the ext:menu component, not menu item:
    <Listeners>
        <BeforeHide Handler="if (item == item.parentMenu.activeChild) return false;" />
    </Listeners>
    I'm not sure we should treat this specific aspect as a bug, as the menu item itself is not hiding on click, which is the purpose of the option. Please share your thoughts and let us know if the alternative code above addresses your concerns or not.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Jun 25, 2015, 3:04 PM
  2. [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
  3. Replies: 8
    Last Post: Jul 29, 2012, 10:58 AM
  4. Replies: 2
    Last Post: Apr 02, 2012, 7:48 AM
  5. [CLOSED] Always selected Item is nothing for combobox as menu item
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 04, 2011, 4:51 PM

Posting Permissions