Results 1 to 6 of 6

Thread: Context Menu attached to Tree component

  1. #1
    Sencha User
    Join Date
    May 2017
    Posts
    10
    Vote Rating
    0
      0  

    Default Answered: Context Menu attached to Tree component

    I want to have Menu attached to Tree component, eg on right click on item in tree, contextMenu is opening.

    Looking at docs, cant find appropriate event listener to trigger opening menu, and also cant see how to position menu on mouse position.

    Also tried to use external library react-contextmenu, but hopeless, Tree isnt rendered after putting it inside ContextMenuTrigger tag

    Any idea?

  2. Here is an example of a context menu on a tree:

    https://fiddle.sencha.com/?extreact#...or&fiddle/242k

    The key to listening for the contextmenu event on the tree is to use the element option on the event listener:

    Code:
    <Tree
        onContextMenu={{
            element: 'element',
            fn: this.toggleMenu,
            preventDefault: true
        }}
    >
    ...
    </Tree>

  3. #2
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    481
    Answers
    114
    Vote Rating
    53
      0  

    Default

    Here is an example of a context menu on a tree:

    https://fiddle.sencha.com/?extreact#...or&fiddle/242k

    The key to listening for the contextmenu event on the tree is to use the element option on the event listener:

    Code:
    <Tree
        onContextMenu={{
            element: 'element',
            fn: this.toggleMenu,
            preventDefault: true
        }}
    >
    ...
    </Tree>

  4. #3
    Sencha User
    Join Date
    May 2017
    Posts
    10
    Vote Rating
    0
      0  

    Default

    Wow, thank you!

  5. #4
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    753
    Answers
    9
    Vote Rating
    59
      0  

    Default

    For those who are looking for the same idea for Ext Js Modern Toolkit. here you are.

    Thanks @Mark.Brocatofor the inspiration!

    https://fiddle.sencha.com/#view/editor&fiddle/26jn
    Wemerson Januario
    Blog: http://wemersonjanuario.com.br
    Contrate-me/Hire me on: https://www.upwork.com/fl/wemersonjanuario
    From: Goiânia, GO, Brazil
    Sencha Consultant and Web Developer

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  6. #5
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,377
    Answers
    20
    Vote Rating
    720
      -1  

    Default

    Quote Originally Posted by Mark.Brocato View Post
    Here is an example of a context menu on a tree:

    https://fiddle.sencha.com/?extreact#...or&fiddle/242k

    The key to listening for the contextmenu event on the tree is to use the element option on the event listener:

    Code:
    <Tree
        onContextMenu={{
            element: 'element',
            fn: this.toggleMenu,
            preventDefault: true
        }}
    >
    ...
    </Tree>
    I try go over these helpful examples whenever I have time. I don't see that the Tree contextmenu event is documented.

    The other thing is that the amount of spam in this forum is becoming unbearable. I had to bypass and ignore 25 page of spam this morning.

  7. #6
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    481
    Answers
    114
    Vote Rating
    53
      0  

    Default

    In this case the context element is fired by the underlying DOM element, not the Tree component. The event is therefore documented on Ext.dom.Element: http://docs.sencha.com/extreact/6.5....nt-contextmenu

    You can listen for any event from Ext.dom.Element on any ExtReact component using the object form of event handlers:

    Code:
    <SomeExtReactComponent 
      on(CamelizedEventName)={{
        element: 'element', // this means we are listening on the underlying DOM element, and that the event is documented in Ext.dom.Element
        fn: this.someHandler // to be called when the event is fired
      }}
    />

Similar Threads

  1. Replies: 1
    Last Post: 5 Jun 2013, 11:33 AM
  2. Replies: 2
    Last Post: 16 Dec 2011, 1:15 AM
  3. Replies: 2
    Last Post: 15 Jul 2009, 7:34 AM
  4. Displaying context menu for Component
    By G_Taylor in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 18 Nov 2008, 1:31 PM
  5. tree context menu event acting on tree
    By garyrgi in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 21 May 2007, 11:15 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •