PDA

View Full Version : 4.0.7 Dynamically Hide/Show MenuItems in 'beforeshow' event menu won't resize Menu



townsenda
26 Mar 2012, 11:58 AM
In ExtJS3 used to override renderUI and handleHdDown to do 2 things:  1) remove the asc/desc menu popup items if the column is not sortable and 2) add a new menu item for renaming the header.

I'm attempting to perform both 1 and 2 in ExtJS4 (4.0.7 specifically) in a method tied to the menu's 'beforeshow' event.

To accomplish this I've created a GridView (now Ext.grid.View in 4.0.7) that I use in my Grid... I create a typical grid and override it's view with an instance of my GridView.   I have followed the ux FiltersFeature as an example on how to register my onMenuBeforeShow method.



this.headerCt.on('menucreate', this.onMenuCreate, this);

....
onMenuCreate: function(headerCt, menu) {
menu.on('beforeshow', this.onMenuBeforeShow, this);
},
....
onMenuBeforeShow: function(menu) {
var me = this,
menuItems = menu.items,
renameMenuItem;

// Hide the asc/desc if this is not sortable
if (!menu.activeHeader.sortable) {
menuItems.get('ascItem').hide();
menuItems.get('descItem').hide();
} else {
menuItems.get('ascItem').show();
menuItems.get('descItem').show();
if (menu.apsFirstSeparatorAfterHidden != null) {
menu.apsFirstSeparatorAfterHidden.show();
}
}
var hiddenCount = 0;
var firstSeparator = null;
Ext.each(menuItems.items, function(item){
if (item.hidden) {
hiddenCount++;
}
if (hiddenCount > 0 && item.separatorCls == 'x-menu-item-separator') {
resizeRequired = true;
firstSeparator = item;
return false; // break the loop
}
});
if (firstSeparator != null) {
firstSeparator.hide();
// Put a marker in the menu for this
menu.apsFirstSeparatorAfterHidden = firstSeparator;
}


// Now create the rename header item
if (me.enableHeaderRename) {
renameMenuItem = me.renameMenuItem;
if (!renameMenuItem || renameMenuItem.isDestroyed) {
me.createMenuItem(menu);
renameMenuItem = me.renameMenuItem;
}
}

menu.forceComponentLayout();
// menu.activeHeader.doLayout();
},




Now the forceComponentLayout() call is not resizing the Menu accordingly between columns. Aka the same menu is being used for each Column...and if the first column that the user clicks on is one that is not sortable (hence we hide the asc/desc and seperator) then when the user goes to use a column that IS sortable it properly shows the asc/desc and seperator MenuItems but does not resize the menu to show those newly "show"n items.


What am I doing wrong (I have tried menu.redoComponentLayout() as well as forceComponentLayout and still have not found the proper call to force the recalculation of the container for the MenuItems.)


Thanks in advance for any time spent.

townsenda
26 Mar 2012, 12:18 PM
The following seems to be correct:


menu.activeHeader.redoComponentLayout();

townsenda
26 Mar 2012, 12:28 PM
I was incorrect...



menu.activeHeader.redoComponentLayout();

Threw an error. Yet the behavior I wanted was present... comment out the line and re-test..and the broken behavior is back. Thus I determined to return false from the method and this worked properly. This I believe is the best answer.. (not my previous re-herring)

townsenda
27 Mar 2012, 6:15 AM
Ok.. so returning out with a false from this event is NOT solving my issue as it breaks other events (like the timer that eventually removes the popup header menu). I've gone back to trying:

menu.doLayout, etc. with no luck.. it's almost like this is the wrong time in the event cycle to be making changes to the number of items on the menu.

Any ideas?