Results 1 to 2 of 2

Thread: defaultAlign property not working

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    22
    Vote Rating
    0
      0  

    Default defaultAlign property not working

    Code:
    dockedItems: [{        xtype: 'toolbar',
            dock: 'bottom',
            layout: 'hbox',
            pack: 'center',
            items: [{
                xtype: 'button',
                text: 'menu button',
                menu: {
                    xtype: 'menu',
                    defaultAlign: 'tr-bl',
                    width: 300,
                    height: 300,
                    items: [
                        {text: 'item 1'},
                        {text: 'item 1'},
                        {text: 'item 1'}
                    ]
                }
            }]
    }],

    I have a menu that's paired with a button on a toolbar, and I'm attempting to play with the 'defaultAlign' property to change how that menu is anchored to the button. The first time I open the menu it appears to be attached to 'bl-bl' so it's directly over the button.

    The second time I click the button the menu is anchored at 'bl-tl' regardless of what I specify for defaultAlign.

    Ext JS 4.0.7

    Second time after opening:

    Screen Shot 2012-02-01 at 4.42.58 PM.png

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    This has and hasn't been fixed in 4.1.0 beta2. This works just fine at aligning the menu to the top of the button:

    Code:
    new Ext.container.Viewport({
        layout : 'fit',
        items  : {
            xtype       : 'panel',
            dockedItems : [
                {
                    xtype    : 'toolbar',
                    dock     : 'bottom',
                    items    : [
                        {
                            xtype : 'button',
                            text  : 'Add',
                            menu  : {
                                items : [
                                    { text : 'Item 1' },
                                    { text : 'Item 2' }
                                ]
                            }
                        }
                    ]
                }
            ]
        }
    });
    But testing this more as to why this worked and not yours I found a new bug that we get to fix. The bug appears when you give the menu a height, then the menu is aligned 1/3 way up from the bottom:

    Code:
    new Ext.container.Viewport({
        layout : 'fit',
        items  : {
            xtype       : 'panel',
            dockedItems : [
                {
                    xtype    : 'toolbar',
                    dock     : 'bottom',
                    items    : [
                        {
                            xtype : 'button',
                            text  : 'Add',
                            menu  : {
                                height : 300,
                                items  : [
                                    { text : 'Item 1' },
                                    { text : 'Item 2' }
                                ]
                            }
                        }
                    ]
                }
            ]
        }
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Posting Permissions

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