PDA

View Full Version : Best solution for defining alignement offsets and show/hide animations on Menu.



kschaffe
7 Jan 2014, 2:09 PM
I created a custom tabpanel that has a 'menu button' aligned to the right in the tabbar. My Menu class uses defaultAlign: 'tr-br?' which is great but I need the menu to align to the bottom of the tab bar, not the button. So a simple Y coordinate offset would work but I cound't find a solution thats as simple as setting a config. After some searching I ended up finding that overriding the getAlignToXY function worked:

getAlignToXY: function() {
posArray = this.callParent(arguments);
//posArray[0] += 0; // Adjust the x coordinate here.
posArray[1] += 8; // Move the menu down 8 pixels.
return posArray;
},
Also I wanted to add an animation to make it look like the menu is 'dropping down' from the button. I'm not sure if it's my lack of knowledge of the component lifecycle or the API in general but it took some trial and error and forum searching to finally get this to work by adding show and beforehide event listeners:


boxready: function() {
this.myHeight = this.getHeight();
}


show: function() {
this.setHeight(0);

this.animate({
to: {
height: this.myHeight
}
});
},
beforehide: function() {
//console.log('In beforehide handler animating');
this.animate({
to: {
height: 0
},
listeners: {
afteranimate: function() {
// Don't completely understand but supsending and resuming Events fixed all my problems.
this.suspendEvents();
this.hide();
this.resumeEvents();
},
scope: this
}
});
return false;
}



Is this the best approach to accomplishing this? I tried to use the alignTo method but wasn't having any luck. I came across http://www.sencha.com/forum/showthread.php?69896-Feature-Req-Support-for-the-Offsets-Array-in-Menu-s-quot-alignTo-quot-Button-s-quot-menuAlign-quot but it doesn't look like this feature has been added yet? It's a pretty old post so I was hoping it would be but I couldn't find anything.

slemmon
14 Jan 2014, 12:38 PM
This approach looks ok to me.

kschaffe
16 Jan 2014, 3:52 PM
Ok, thanks. The animation part was tricky becuase I found people suggesting listening to or overriding the show and hide events. For showing, it seems like overriding would be the better solution, so I can make it show how I want, with an animation, instead of listening to when it had already been shown and then basically hiding it with a height of 0 then starting the animation. Furthermore, listening to hide did not work, while beforehide did. This makes more sense cause it simliar to the overriding the hide method and changing HOW it hides. You would think beforeShow would've been the better approach too but it wasn't working for me at all.

For alignment, overriding getAlignToXY makes perfect sense, just took a minute to find. Plus I found a jfiddle that was working by overriding beforeSetPostion instead.. but didn't work for me, maybe it has been depricated?

Anyhow, I'm sure I wouldn't have had as much trouble with more experience but hopefully this helps someone else as the searching I did was more misleading than helpful.