PDA

View Full Version : Button menu slideIn animation



madvas
16 Dec 2013, 1:54 AM
Hello everybody,

I'm trying to implement button with menu, which appears using slideIn animation.
This is my example code:



Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
width : 500,
height : 500,
renderTo : 'example-container',


tbar : [
'->',
{
text : 'Settings',
xtype : 'button',
menuAlign : 'tr-br',
menu : {
xtype : 'menu',
plain : true,
width : 200,
listeners : {
'show' : {
fn : function(menu) {
menu.getEl().slideIn('t');
}
}
},
items : [
{
xtype : 'form',
flex : 1,
bodyPadding : 10,
fieldDefaults : {
labelAlign : 'top',
labelStyle : 'margin-bottom: 5px'
},
defaults : {
anchor : '100%',
margins : '0 0 15 0'
},
items : [
{
xtype : 'slider',
name : 'width',
fieldLabel : 'Width'
},
{
xtype : 'slider',
name : 'height',
fieldLabel : 'Height'
}
]
}
]
}
}
]
})
});


The problem is, when I click Settings button, the menu firstly shows instantly, then it hides again a after then it animates using slideIn. Which looks very weird of course. And also shadow is expanded instantly after clicking button. As. on the screen.

47233

Does anyone know how to properly implement button menu slideIn animation?

Thank you for your help!

phani.gutha
17 Mar 2015, 10:26 PM
me to have a similar need.Any suggestions on this ?