PDA

View Full Version : Menu icon is not displaying when menu is added dynamically for button



Krithi
6 Aug 2014, 11:04 PM
Menu icon is not displaying when menu is added dynamically to button.

Please find the below code

var button1 = Ext.create('Ext.Button', {
text : 'Menu button',
renderTo : Ext.getBody(),
arrowAlign: 'bottom'
});

var menu1 = Ext.create('Ext.menu.Menu',{
items:[{text: 'Item 1'},
{text: 'Item 2'},
{text: 'Item 3'},
{text: 'Item 4'}]
});

button1.menu = menu1;

StuartAshworth
6 Aug 2014, 11:26 PM
If you switch around your create statements and assign the menu in the Button's config it should work. By just assigning menu1 to the button's menu property won't trigger any kind of DOM change to create/show the arrow icon.



var menu1 = Ext.create('Ext.menu.Menu',{
items:[
{text: 'Item 1'},
{text: 'Item 2'},
{text: 'Item 3'},
{text: 'Item 4'}
]
});

var button1 = Ext.create('Ext.Button', {
text : 'Menu button',
renderTo : Ext.getBody(),
arrowAlign: 'bottom',

menu: menu1
});

skirtle
7 Aug 2014, 12:55 AM
You could also use setMenu, or change the menu's items without changing the menu.

StuartAshworth
7 Aug 2014, 12:58 AM
I don't think the Button class has a setMenu method.

skirtle
7 Aug 2014, 1:02 AM
Yeah, sorry, I had the Ext 5 docs open.

My other suggestion, adding and removing items to the menu dynamically, is still viable.

StuartAshworth
7 Aug 2014, 1:06 AM
Good to know that it is available in 5 though because switching out menus can't be an uncommon task. :)

Krithi
7 Aug 2014, 1:31 AM
in our scenario button is already added and we are adding menus later.

Our scenario is we are adding buttons to the toggle bar,
if we create button with the menu , and if one of the menu is empty then it is showing small rectangular box when we switch between two buttons

StuartAshworth
7 Aug 2014, 1:59 AM
The small box is likely to be the menu rendering empty. You could override the showMenu method in your Button class and add a check there for the number of items present and only do the proper show when there are items present.Something like (totally untested! :)):



...
showMenu: function(){
if(this.menu && this.menu.items.getCount() > 0){
return this.callParent(arguments);
} else {
return this;
}
}
...