PDA

View Full Version : Sencha 1.1 - Setting Opacity during Fade Out Ext.Anim



wildzephyr
14 Nov 2011, 9:17 PM
I want to fade-in/out a toolbar component on click of a button. However, post the fade-in I want to define an opacity to the toolbar so that it appears as an semi-transparent overlay on the main panel. However, the default opacity for the fade-out transition is set to 1 and I do not find a way to override this behaviour.

Would be great to get some pointers as to how to deal with this.

Have added listeners to the toolbar as below :


Ext.Anim.run(this, 'fade', { out: false,
duration:800,
to:{
opacity:0.6,
},
from:{
opacity:0,
},
autoClear: false
});
},
hide: function() {
Ext.Anim.run(this, 'fade', {
out: false,
duration:800,
autoClear: false
});
}

digeridoo
15 Nov 2011, 1:27 AM
Does this bit of code help at all? This was posted on here somewhere before, sets up a handler to display / hide a toolbar at 0.6 opacity on click of a button. If you get an example working with Ext.Anim please post it here.


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var p = new Ext.Panel({
fullscreen: true,
layout: 'fit',
dockedItems: [{
overlay: true,
dock: 'top',
xtype: 'toolbar',
style: 'opacity: 0.6;',
items: {
text: 'Top'
}
}, {
overlay: true,
dock: 'bottom',
xtype: 'toolbar',
style: 'opacity: 0.6;',
items: {
text: 'Bottom'
}
}],
items: {
xtype: 'carousel',
items: [{
layout: {
type: 'vbox',
pack: 'center'
},
items: {
xtype: 'button',
text: 'Hide toolbars',
handler: function(){
p.dockedItems.each(function(c){
c.hide();
});
}
}
}, {
layout: {
type: 'vbox',
pack: 'center'
},
items: {
xtype: 'button',
text: 'Show toolbars',
handler: function(){
p.dockedItems.each(function(c){
c.show();
});
}
}
}]
}
});
}
});