Results 1 to 4 of 4

Thread: Nested menu items

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-25361 in 6.5.1.
  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    4

    Default Nested menu items

    Hi

    There seems to be a bug with nested menu items if you use <Menu /> and not a config object. I have a very simple menu in a toolbar like this:

    Code:
    <Toolbar docked="bottom">
      <Button text="Button 1">
        <Menu>
          <MenuItem iconCls="x-fa fa-home" text="Menu Item 1"/>
          <MenuItem iconCls="x-fa fa-database" text="Menu Item 2"/>
          <MenuItem iconCls="x-fa fa-music" text="Menu Item 3"/>
          <MenuItem iconCls="x-fa fa-user" text="Menu Item 4" menu={subMenu}/>
        </Menu>
      </Button>
      <Container flex={1}/>
      <Button text="Button 2"/>
    </Toolbar>
    If I let subMenu be another <Menu /> item like

    Code:
    const subMenu = <Menu>
       <MenuItem iconCls="x-fa fa-home" text="Menu Item 4.1"/>
       <MenuItem iconCls="x-fa fa-database" text="Menu Item 4.2"/>
       <MenuItem iconCls="x-fa fa-music" text="Menu Item 4.3"/>
       <MenuItem iconCls="x-fa fa-user" text="Menu Item 4.4"/>
     </Menu>;
    The menu item has a pointer indicating nested menu, but it shows up empty. If I however use a config object:

    Code:
    const subMenu = {
      xtype: 'menu',
      items: [{
        text: 'Menu Item 4.1',
        iconCls: 'x-fa fa-home'
      }, {
        text: 'Menu Item 4.2',
        iconCls: 'x-fa fa-database'
      }, {
        text: 'Menu Item 4.3',
        iconCls: 'x-fa fa-music'
      }, {
        text: 'Menu Item 4.4',
        iconCls: 'x-fa fa-user'
      }]
    };
    It works fine. Am I doing something wrong or is this a bug?

  2. #2
    Sencha User
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482

    Default

    It appears this is a bug. The proper way to use submenus should be as follows:

    Code:
    <Toolbar docked="bottom">
      <Button text="Button 1">
        <Menu>
          <MenuItem iconCls="x-fa fa-home" text="Menu Item 1"/>
          <MenuItem iconCls="x-fa fa-database" text="Menu Item 2"/>
          <MenuItem iconCls="x-fa fa-music" text="Menu Item 3"/>
          <MenuItem iconCls="x-fa fa-user" text="Menu Item 4">
            <Menu>
               <MenuItem iconCls="x-fa fa-home" text="Menu Item 4.1"/>
               <MenuItem iconCls="x-fa fa-database" text="Menu Item 4.2"/>
               <MenuItem iconCls="x-fa fa-music" text="Menu Item 4.3"/>
               <MenuItem iconCls="x-fa fa-user" text="Menu Item 4.4"/>
            </Menu>
          </MenuItem>
        </Menu>
      </Button>
    </Toolbar>
    But the above does not currently work either. Using a config object with xtypes and assigning it to the menu prop is the best workaround at the moment. We'll see about getting this fixed in 6.5.1.

  4. #4
    Sencha Premium User
    Join Date
    May 2009
    Posts
    79

    Default

    Confirmed that this was not fixed in 6.5.1 or 6.5.2. Not entirely sure why this post is marked as [FIXED]. Please reopen this issue.

Similar Threads

  1. Replies: 2
    Last Post: 24 Jun 2016, 12:45 PM
  2. ExtJS 4.2.x Menu Items (extra space before menu items)
    By arnoldvillasanta in forum Ext:Bugs
    Replies: 7
    Last Post: 8 Jul 2014, 3:16 PM
  3. Replies: 1
    Last Post: 29 Jul 2013, 12:40 PM
  4. Replies: 17
    Last Post: 12 Nov 2009, 4:01 AM
  5. Nested Items within a Menu Container do not render
    By brookd in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 13 Jul 2009, 11:11 AM

Posting Permissions

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