What's New?

[CLOSED] TreePanel ItemContextMenu (Hide Browser ContextMenu)

  1. #1
    Sep 24, 2014, 2:54 PM

    [CLOSED] TreePanel ItemContextMenu (Hide Browser ContextMenu)

    I have a TreePanel that defines a listener for ItemContextMenu. Everything works just fine. The issue is that when the user presses the right mouse button when he is not over a tree item the Browser contextmenu is displayed. Is there anyway to hide the browser contextmenu for this treePanel control so they aren't confused?
    Last edited by Daniil; Oct 03, 2014 at 1:40 PM. Reason: [CLOSED]
  2. #2
    Sep 25, 2014, 8:13 AM
    Hi Chris,

    This listener for a TreePanel should help.
    <ViewReady Handler="this.getView().el.on('contextmenu', function(e) { e.preventDefault(); });" />
  3. #3
    Sep 25, 2014, 7:12 PM
    Perfect. I haven't used this listener before. Please close the thread.
  4. #4
    Sep 26, 2014, 12:54 PM
    I wanted to complete this thread with a couple of final thoughts.

    To hide the browsers context menu in a GridPanel it looks like the listener Render works and not ViewReady:

    <Render Handler="this.getView().el.on('contextmenu', function(e) { e.preventDefault(); });" />

    To hide the browsers context menu for the entire application (if for some reason you wanted to):

    <ext:ResourceManager runat="server">
   <Listeners>
      <DocumentReady Handler="Ext.get(window.document).on('contextmenu', function(e) { e.preventDefault(); return false;});" />
   </Listeners>
</ext:ResourceManager>
  5. #5
    Sep 26, 2014, 2:12 PM
    To hide the browsers context menu in a GridPanel it looks like the listener Render works and not ViewReady:
    Strange. It appears that ViewReady works in this example.

    Example
    <%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test", "test" },
                new object[] { "test", "test" },
                new object[] { "test", "test" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:GridPanel ID="GridPanel1" runat="server" Height="400">
            <Bin>
                <ext:Menu ID="Menu1" runat="server">
                    <Items>
                        <ext:MenuItem Text="Item 1" />
                        <ext:MenuItem Text="Item 2" />
                    </Items>
                </ext:Menu>
            </Bin>
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2" />
                </Columns>
            </ColumnModel>
            <Listeners>
                <ItemContextMenu Handler="App.Menu1.showAt(e.getXY());" />
                <ViewReady Handler="this.getView().el.on('contextmenu', function(e) { e.preventDefault(); });" />
            </Listeners>
        </ext:GridPanel>
    </form>
</body>
</html>
    To hide the browsers context menu for the entire application (if for some reason you wanted to):
    Thank you for sharing!
  6. #6
    Sep 26, 2014, 2:57 PM
    Interesting. None of my three GridPanels will hide the browser contextmenu with the code:

    <Listeners>        
    <ViewReady Handler="this.getView().el.on('contextmenu', function(e) { e.preventDefault(); });" />
</Listeners>
    I have to use
    <Listeners>        
    <Render Handler="this.getView().el.on('contextmenu', function(e) { e.preventDefault(); });" />
</Listeners>
    When I put an alert message in the ViewReady handle the message box never shows up, but it does in Render. Why would the ViewReady listener never get called? There are no javascript error in the browser.

    <Listeners>        
    <ViewReady Handler="Ext.Msg.alert('Message', 'Disable CM'); this.getView().el.on('contextmenu', function(e) { e.preventDefault(); });" />
</Listeners>
  7. #7
    Sep 26, 2014, 4:03 PM
    I would expect the ViewReady event to be always fired.

    Any chance for a test case?
  8. #8
    Sep 26, 2014, 4:17 PM
    The offending control is deep in code. I will work on a test case tomorrow morning while watching Everton at Liverpool.

Similar Threads

  1. [CLOSED] TreePanel with ContextMenu retrieve NodeID of node clicked
    By taylorjp2000 in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 13, 2012, 3:17 PM
  2. [CLOSED] Proper way to get the Tree NodeID in the TreePanel ItemContextMenu handler
    By CarpFisher in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Sep 26, 2012, 7:46 PM
  3. [CLOSED] ContextMenu in TreePanel shows menu when right click title or toolbar
    By jchau in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Nov 13, 2011, 4:43 PM
  4. TreePanel and ContextMenu
    By rhnkyr in forum 1.x Help
    Replies: 2
    Last Post: Oct 15, 2009, 9:51 AM
  5. [CLOSED] ContextMenu AjaxEvent on TreePanel broken?
    By klavsm in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 18, 2009, 5:35 AM

Posting Permissions