1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    nakhli is on a distinguished road

      0  

    Default Unanswered: dynamic context menu on tree

    Unanswered: dynamic context menu on tree


    I am trying to modify the visible context menu items depending on the selected node in a tree.
    I tried using

    Tree.addBeforeShowContextMenuHandler(BeforeShowContextMenuEvent.BeforeShowContextMenuHandler)

    but it is not getting called before the context menu is shown.

    Any ideas on how to achieve this? Thank you.

  2. #2
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    140
    Answers
    2
    Vote Rating
    1
    PhiLho is on a distinguished road

      0  

    Default


    +1 (for Beta3)

    I need to customize the context menu depending on the clicked node, but the method isn't called.
    I explored a bit the sources, but I don't see where any BeforeShowContextMenuEvent is created.
    Is it on the TODO list of Sencha?

  3. #3
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    140
    Answers
    2
    Vote Rating
    1
    PhiLho is on a distinguished road

      0  

    Default


    For the record, there is a workaround, using low-level Dom events:
    Code:
      private class NodeCell extends SimpleSafeHtmlCell<String>
      {
        // http://stackoverflow.com/questions/5185078/what-is-the-list-of-valid-gwt-dom-consumed-events-for-cells
        private static final String NODE_EVENT_CLICK = "click";
        private static final String NODE_EVENT_CONTEXTMENU = "contextmenu";
    
        /**
         * Constructor, using a default renderer and defining the events we are interested in.
         */
        public NodeCell()
        {
          super(SimpleSafeHtmlRenderer.getInstance(), NODE_EVENT_CLICK, NODE_EVENT_CONTEXTMENU);
        }
    
        @Override
        public void onBrowserEvent(
            Context context, Element parent, String value, NativeEvent event,
            ValueUpdater<String> valueUpdater)
        {
          super.onBrowserEvent(context, parent, value, event, valueUpdater);
          if (event.getType().equals(NODE_EVENT_CLICK))
          {
            handleClick(context, value);
          }
          else if (event.getType().equals(NODE_EVENT_CONTEXTMENU))
          {
            handleContextMenu(context, value);
          }
        }
      }
    It is not perfect as we get a Context, ie. only a string id, not the data associated to a node, but that's better than nothing and it allows to change the context menu state (disable, hide items) before displaying it.
    Note also the management of click on a node, as the select event is fired even if we just open a parent node: if we associate a complex display to such parent, we don't necessarily want to display it on each step of navigating the tree.
    Think "file explorer" where you might want to go down a hierarchy without displaying the list of files of each level, for example.
    If GXT 3 could distinguish the two events (click to fold / unfold a node, click on the node itself) at a higher level, it would be nice.

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2008
    Posts
    1
    Vote Rating
    1
    mspronk is on a distinguished road

      1  

    Default ..or you can enable/disable/show/hide like this

    ..or you can enable/disable/show/hide like this


    I ran into a similar need to customize the context menu and based on another thread on this forum I was able to accomplish what I needed by selectively showing and hiding (or in my case enabling and disabling) previously created menu items.

    Code:
    final TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
    
    final Menu contextMenu = new Menu();  
    MenuItem insert = new MenuItem();  
    insert.setText("Insert New List");  
    insert.setIcon(Resources.ICONS.addIcon());  
    insert.addSelectionListener(new SelectionListener<MenuEvent>() {  
    	public void componentSelected(MenuEvent ce) {  
    		ModelData folder = tree.getSelectionModel().getSelectedItem();  
    		// Do stuff  
    	}  
    });  
    contextMenu.add(insert);  
    	  
    MenuItem remove = new MenuItem();  
    remove.setText("Remove Selected List");  
    remove.setIcon(Resources.ICONS.removeIcon());  
    remove.addSelectionListener(new SelectionListener<MenuEvent>() {  
    	public void componentSelected(MenuEvent ce) {
    		List<ModelData> selected = tree.getSelectionModel().getSelectedItems();  
    	        for (ModelData sel : selected) {  
    			// Do stuff  
    		}  
    	} 
    });  
    contextMenu.add(remove);  
    tree.setContextMenu(contextMenu);
    
    // Enable/disable applicable context menu items depending on the type
    tree.addListener(Events.ContextMenu, new Listener<TreePanelEvent<ModelData>>() {
    	public void handleEvent(TreePanelEvent<ModelData> be) {
    		if (be.getItem() instanceof SubscriberList) {
    			// If it's a list
    			contextMenu.getItems().get(0).disable();
     			contextMenu.getItems().get(1).enable();
     		} else {
     			// If it's a client
     			contextMenu.getItems().get(0).enable();
     			contextMenu.getItems().get(1).disable();
    		}
    	}
    });

  5. #5
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    140
    Answers
    2
    Vote Rating
    1
    PhiLho is on a distinguished road

      0  

    Default


    What is this TreePanel? I don't find it in Eclipse.

  6. #6
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Answers
    60
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

Thread Participants: 3