Results 1 to 3 of 3

Thread: Possible bug with menu in button [4.2.1[

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    124
    Answers
    3
    Vote Rating
    3
      0  

    Exclamation Answered: Possible bug with menu in button [4.2.1[

    Hi,

    I have following code

    Code:
    Ext.create('Ext.button.Button', {            
                itemId : 'routingMenuButton',
                text : Locales.routing_buttonLabel,
                iconCls : 'icon-map',
                menu : {
                    xtype : 'menu',
                    itemId : 'routeMenu',
                    width : 190,
                    items : [ {
                        xtype : 'menuitem',
                        text : Locales.routing_newRoute,
                        itemId : 'routingSettingsButton',
                        iconCls : 'icon-add'
                    }, {
                        xtype : 'menuitem',
                        text : Locales.routing_myRoutes,
                        itemId : 'myRoutesButton',
                        iconCls : 'icon-star',
                        disabled: true,
                        tooltip: Locales.login_pleaseLogin,
                        menu : {
                            xtype : 'menu',
                            plain : true,
                            itemId : 'myRouteMenu',
                            width : 350,
                            items : [ {
                                xtype : 'myroutespanel',
                            } ]
                        }
    
    
                    } ]
                }
    })
    in 4.2.0 it all looks fine. Bildschirmfoto 2013-06-13 um 15.18.25.png

    But after upgrading to 4.2.1 the arrow indicating a menu is always rendered at the bottom. Bildschirmfoto 2013-06-13 um 15.14.37.png

    Is there a way to fix this?

    Thanks in advance!

  2. I tried to recreate the issue you're seeing using the below test case, but wasn't seeing the issue with 4.2.1 with the classic or the Neptune themes. Do you have some additional CSS you're using on top of the framework CSS? What browser is this in that you're seeing the issue (I tested in Chrome)? Do you see the menu arrows rendered correctly when you open this example from 4.2.1?
    http://docs.sencha.com/extjs/4.2.1/e...#basic-buttons

    Code:
    Ext.create('Ext.button.Button', {
        renderTo: document.body,
        itemId: 'routingMenuButton',
        text: 'Text',
        iconCls: 'icon-map',
        menu: {
            xtype: 'menu',
            itemId: 'routeMenu',
            width: 190,
            items: [{
                xtype: 'menuitem',
                text: 'Text',
                itemId: 'routingSettingsButton',
                iconCls: 'icon-add'
            }, {
                xtype: 'menuitem',
                text: 'Text',
                itemId: 'myRoutesButton',
                iconCls: 'icon-star',
                disabled: true,
                tooltip: 'Text',
                menu: {
                    xtype: 'menu',
                    plain: true,
                    itemId: 'myRouteMenu',
                    width: 350,
                    items: [{
                        text: 'myroutespanel',
                    }]
                }
            }]
        }
    });

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,154
    Answers
    501
    Vote Rating
    249
      0  

    Default

    I tried to recreate the issue you're seeing using the below test case, but wasn't seeing the issue with 4.2.1 with the classic or the Neptune themes. Do you have some additional CSS you're using on top of the framework CSS? What browser is this in that you're seeing the issue (I tested in Chrome)? Do you see the menu arrows rendered correctly when you open this example from 4.2.1?
    http://docs.sencha.com/extjs/4.2.1/e...#basic-buttons

    Code:
    Ext.create('Ext.button.Button', {
        renderTo: document.body,
        itemId: 'routingMenuButton',
        text: 'Text',
        iconCls: 'icon-map',
        menu: {
            xtype: 'menu',
            itemId: 'routeMenu',
            width: 190,
            items: [{
                xtype: 'menuitem',
                text: 'Text',
                itemId: 'routingSettingsButton',
                iconCls: 'icon-add'
            }, {
                xtype: 'menuitem',
                text: 'Text',
                itemId: 'myRoutesButton',
                iconCls: 'icon-star',
                disabled: true,
                tooltip: 'Text',
                menu: {
                    xtype: 'menu',
                    plain: true,
                    itemId: 'myRouteMenu',
                    width: 350,
                    items: [{
                        text: 'myroutespanel',
                    }]
                }
            }]
        }
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our human resources manager: fabienne.bell@sencha.com

  4. #3
    Sencha Premium Member
    Join Date
    Apr 2012
    Location
    Germany
    Posts
    124
    Answers
    3
    Vote Rating
    3
      0  

    Default

    Thanks for your hint! As I'm using a custom theme, I noticed, that it was build with 4.2.0. Just rebuild it with 4.2.1 and the error is gone. Seems like the CSS file from 4.2.0 does have some slight compatibility problems.

    But works now! Thanks once again for the hint!

Tags for this Thread

Posting Permissions

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