PDA

View Full Version : Prevent button menu from expanding



stranieroinpatria
25 Oct 2012, 2:10 AM
Hi all,
I've replaced the tabs labels with buttons that contains menu.

http://postimage.org/image/5t1vtb6a9/

Now I have a problem.When switching tabs obviously the expand menu is everytime shown and I don't want it.The expand menu need to be expanded just when the tab is active and not during switching tabs.
Disable button is not the solution because prevent the switching too..(you have to click in the label area that is not replaced with button)....
Some ideas??

Farish
25 Oct 2012, 2:30 AM
you can add a listener on the beforeexpand event of the menus. Inside the listener, you can use tabpanel.getActiveTab() to get the active tab. then you can check if the menu which fired the beforeexpand is of that tab or not. If not, you can return false and the expand will be cancelled. If it is the menu of the active tab that fired the beforeexpand event, then you can return true to show the menu. e.g. tab1 has menu1, tab2 has menu2:


menu1.on('beforeexpand', function() {
if(tabpanel.getActiveTab() == tab1) // you can use some property e.g. id here for comparison
return true;
else return false;
});

stranieroinpatria
26 Oct 2012, 2:48 AM
Thanks for the response,my fault I was lookin' for beforeexpand listener in another place.
But,after add the listener,it don't fire...this is my constructor...why the beforeexpand and the expand event too don't fire?


var btn = Ext.create("Ext.button.Button",{
text: contenuto.tabtitle,
/*textAlign: 'left',*/
use : "btnmenuheadertab",
/*renderTo : "divtitle"+title,*/
renderTo : tab.tab.id+"-btnWrap",
iconCls: (contenuto.iconCls)?contenuto.iconCls:'layout16',
menu:{
width : 200,
cls : "menuheadertab",
idtab : tab.tab.id,
items:[{
text : "Export All Charts as PDF",
width : 200,
params : contenuto.inputparams,
iconCls : "exportpdf",
cls : "menuitemheadertab",
handler : function(btn){
exportPDF(this.params);
}
},{
text : "Export All Charts as PNG",
width : 200,
params : contenuto.inputparams,
iconCls : "exportpng",
cls : "menuitemheadertab",
handler : function(btn){
exportPNG(this.params);
}
},{
text : "Export Data to Excel",
width : 200,
params : contenuto.inputparams,
iconCls : "exportexcel",
cls : "menuitemheadertab",
handler : function(btn){
exportDataToExcel(this.params);
},

},{
text:"How to use chart?",
iconCls:"help",
width : 200,
cls : "menuitemheadertab",
handler : function(){}
}],
listeners:{
beforeexpand : function(p){
log("beforeexpand",[Ext.getCmp("tabpanel").getActiveTab(),p]);
if(Ext.getCmp("tabpanel").getActiveTab().id != p.idtab) return false;

},
expand:function(){
log("EXPAND");
}
}
},
cls : "buttonheadertab",
listeners:{
afterrender : function(btn){
btn.removeCls("x-btn-default-small");
},
mouseover : function(btn){
btn.removeCls("x-btn-default-small-over");
},
click : function(btn){
btn.removeCls("x-btn-default-small-menu-active");
btn.removeCls("x-btn-default-small-menu-pressed");
}

}
});

Farish
26 Oct 2012, 2:58 AM
could you please create a minimal working version and put it on jsfiddle.net? that would help tracing the problem.

stranieroinpatria
30 Oct 2012, 6:06 AM
Here the link to the mini-fiddle.

http://jsfiddle.net/stranieroinpatria/BnZqy/

As you will see the listeners aren't fired...

stranieroinpatria
30 Oct 2012, 6:19 AM
...?
was the response for what?

Farish
30 Oct 2012, 6:53 AM
the events dont seem to be working. could it be a bug? if you test it a little and it doesnt work, then you may create a bug report for it.

may be someone else can help you out with your problem.

stranieroinpatria
30 Oct 2012, 7:49 AM
i've created a little test in the linked jsfiddle..it is a simplified version of the problem..it contains just the button,the menu with 3 entry and the two listeners on expand and beforeexpand events....

if it is correct the result is that the listeners don't work...but before post a report I need to be sure there aren't mistakes...can you give me a confirm?

Farish
30 Oct 2012, 8:00 AM
I tested it locally on my system with ExtJS 4.0.7 and it wasnt working. But changing the events caused it to work. Here is the code:


Ext.onReady(function(){

Ext.create('Ext.Button', {
text: 'Click me',
width: 100,
renderTo: Ext.getBody(),
handler: function() {
//alert('You clicked the button!')
},
menu:
{
items:
[
{text: 'Hello'}
],
listeners:
{
beforeshow: function() {alert('event'); return false;} // if you remove the return false, then menu will show; otherwise, only alert will appear and menu will remain collapsed
}
}
});

});

So instead of expand and beforeexpand, you can use show and beforeshow respectively.

stranieroinpatria
30 Oct 2012, 8:11 AM
Don't know if your answer can satisfy everybody but me for sure..thank's!!before close the thread..how about the bug?I will use that workaround but...is it a real bug in your opinion?

Farish
30 Oct 2012, 8:23 AM
i checked in the code. Ext.menu.Menu extends Ext.panel.Panel from which it inherits the expand and beforeexpand events. For a panel, these events are fired when a user expands a collapsed panel by clicking on panel header or the expand/collapse tool in the panel header.

so i am not sure how these events should work for Ext.menu.Menu. the documentation doesnt give any details or examples. May be these events are triggered somewhat differently. not sure if this would classify as a bug or not. Someone from Sencha can comment better.