PDA

View Full Version : Menu alignment in Ext 4.1.3



jlawton
26 Mar 2013, 7:00 AM
I'm trying to get a menu to be aligned with the position 'tr-br' (the top-right corner of the menu should line up with the bottom-right corner of the button that shows the menu). But it's not working.

I set up a sample menu at http://jsfiddle.net/jlawton/fdHTZ/ with the following code:



var m = Ext.create('Ext.toolbar.Toolbar', {
items: [
{ xtype: 'button', text: 'button 1' },
{ xtype: 'button', text: 'button 2' },
{ xtype: 'button', text: 'button 3' },
{
xtype: 'button',
text: 'button 4',
menu: {
xtype: 'menu',
defaultAlign: 'tr-br',
items: [
{ xtype: 'button', text: 'sub button 1' },
{ xtype: 'button', text: 'sub button 2' },
{ xtype: 'button', text: 'sub button 3' }
]
}
}
],
renderTo: Ext.getBody()
});


As you can see, I've tried defaultAlign - http://docs.sencha.com/ext-js/4-1/#!/api/Ext.toolbar.Toolbar-cfg-defaultAlign, but it doesn't seem to be working.

I've also tried setting a listener for afterrender (and beforerender, and show, and afterlayout...) which you can see in this jsfiddle (http://jsfiddle.net/jlawton/fdHTZ/2/) and the code below:



var m = Ext.create('Ext.toolbar.Toolbar', {
items: [
{ xtype: 'button', text: 'button 1' },
{ xtype: 'button', text: 'button 2' },
{ xtype: 'button', text: 'button 3' },
{
xtype: 'button',
text: 'button 4',
menu: {
xtype: 'menu',
//defaultAlign: 'tr-br',
items: [
{ xtype: 'button', text: 'sub button 1' },
{ xtype: 'button', text: 'sub button 2' },
{ xtype: 'button', text: 'sub button 3' }
],
listeners: {
afterrender: function(elm) {
elm.alignTo(elm.up('button'), 'tr-br');
}
}
}
}
],
renderTo: Ext.getBody()
});


But it also doesn't work. Any suggestions?

jlawton
26 Mar 2013, 7:35 AM
http://jsfiddle.net/jlawton/fdHTZ/3/

It is a config on the button. Not the menu. http://docs.sencha.com/ext-js/4-1/#!/api/Ext.button.Button-cfg-menuAlign