PDA

View Full Version : fx.Scale() does not cause re-render - how to fix?



bseddon
2 Feb 2012, 5:58 PM
The screen shot below has been taken after executing the following two lines from the button click event:


var win = this.up('window')win.el.scale(250,250);

What should I do to ensure the window is re-rendered so the controls in the window are redrawn after/during resize? Or is there a better way to animate the expansion of a window?

31304

Thanks

evant
2 Feb 2012, 6:11 PM
You need to animate the component:



Ext.onReady(function() {

var win = Ext.create('Ext.window.Window', {
width: 200,
height: 200,
x: 5,
y: 5,
autoShow: true,
layout: 'fit',
items: {
title: 'Foo'
}
});

win.animate({
to: {
width: 400,
height: 400
}
});

});

bseddon
2 Feb 2012, 6:24 PM
Thanks. This animation stuff looks good.

I'm scouring the documentation for examples and coming across alternative ways to accomplish a task. For example, I used animate to animate the opacity of the window to zero but it left the shadow layer (which I could find and then animate away as well). However, I stumbled win.setOpacity(0) which handles both the window and it's shadow. Then I came across the Ext.fx methods. So I assumed using these other methods is the way to go - though clearly not.

Are there any worked examples or a tutorials about using the animation options? Or is there a rule of thumb to guide the selection of the most appropriate option to use?

Thanks