1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    22
    Vote Rating
    0
    cflynn07 is on a distinguished road

      0  

    Default Unanswered: defaultAlign property not working

    Unanswered: 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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1