Results 1 to 9 of 9

Thread: MenuBar & MenuBarItem Highlight

  1. #1
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default MenuBar & MenuBarItem Highlight

    hey Brandon,

    Have a MenuBar with multiple MenuBarItem & MenuItem.
    When I select a Menu item I display a screen below the menu.
    I would like to keep highlighted (or any visual reference) the menu item I just selected while the screen below is active.

    In the picture below, the screen is displayed after selecting "Special Runs" in "Special Run Management" (top of the picture)
    I would like to know that the screen if from "Special Run Management" like at the bottom of the picture.
    Attachment 57405
    Thanks,
    Gaëtan

  2. #2
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    Sorry for the delay. The 4.0.3 release is about out and once it is I'll be able to speed answers up.

    I can't see the screenshot. Could you try that again?

  3. #3
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default

    Here is the screenshoot.


    menu.png

  4. #4
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    I'll look into the css options for changing the color when it's selected.

  5. #5
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default

    hey Brandon

    any updates on this ?

    Thanks,
    Faëtan

  6. #6
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    Sorry, I lost track of this. Once I click on them the unread goes away. I'm scheduling to look at this today.

  7. #7
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    Here's an option to style the MenuBarItem using a css class. I didn't add logic to add and remove it. I Show how to add it, and left a note how to remove the style.

    Code:
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.dom.client.StyleInjector;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.sencha.gxt.widget.core.client.container.SimpleContainer;
    import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
    import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
    import com.sencha.gxt.widget.core.client.container.Viewport;
    import com.sencha.gxt.widget.core.client.menu.Menu;
    import com.sencha.gxt.widget.core.client.menu.MenuBar;
    import com.sencha.gxt.widget.core.client.menu.MenuBarItem;
    import com.sencha.gxt.widget.core.client.menu.MenuItem;
    
    
    public class MenuBarExample implements EntryPoint {
    
    
      @Override
      public void onModuleLoad() {
        // ~~~ custom class, to style give the menu bar color
        // ~~~ I suggest putting this in a ClientBundle. 
        StyleInjector.inject(".custom { background: red !important; }", true);
        
        Menu menu1 = new Menu();
        menu1.add(new MenuItem("A Item 1"));
        menu1.add(new MenuItem("A Item 2"));
        menu1.add(new MenuItem("A Item 3"));
        
        Menu menu2 = new Menu();
        menu2.add(new MenuItem("B Item 1"));
        menu2.add(new MenuItem("B Item 2"));
        menu2.add(new MenuItem("B Item 3"));
        
        MenuBarItem menuBarItem1 = new MenuBarItem("Menu 1", menu1);
        // ~~~ add and remove styles when needed
        menuBarItem1.addStyleName("custom");
        //menuBarItem1.removeStyleName("custom");
        
        MenuBarItem menuBarItem2 = new MenuBarItem("Menu 2", menu2);
        
        MenuBar menuBar = new MenuBar();
        menuBar.add(menuBarItem1);
        menuBar.add(menuBarItem2);
        
        
        VerticalLayoutContainer vlc = new VerticalLayoutContainer();
        vlc.add(menuBar, new VerticalLayoutData(1, -1));
        vlc.add(new SimpleContainer(), new VerticalLayoutData(1, 1));
        
        Viewport vp = new Viewport();
        vp.add(vlc);
        
        RootPanel.get().add(vp);
        
      }
    
    
    }
    Would this help you get closer to your goal?

  8. #8
    Sencha Premium User
    Join Date
    Nov 2016
    Posts
    76

    Default

    That worked out, thanks.

  9. #9
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178

    Default

    Good deal, thanks for getting back!

Similar Threads

  1. I need to add Icon to the MenubarItem.
    By kalyanikhandelwal in forum Sencha GXT Q&A
    Replies: 1
    Last Post: 12 Sep 2014, 5:07 AM
  2. Replies: 2
    Last Post: 3 Mar 2014, 5:32 PM
  3. Icon in MenuBarItem
    By vkeswani in forum Sencha GXT Q&A
    Replies: 1
    Last Post: 20 Jan 2014, 11:04 AM
  4. MenuBarItem that responds directly- without a dropdown
    By blake1024 in forum Sencha GXT Q&A
    Replies: 2
    Last Post: 1 Aug 2013, 3:55 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
  •