CODEWITHSUNDEEP
javascriptanimationextjsextjs7
Silencer310
Silencer310

Reputation: 1100

ExtJS Classic: When animating x/y/width/height of a window, the title is not ending at the final position specified

Using ExtJS Classic 7.3.0

Trying to animate the window while it is showing, but the title of the window is not ending up at the specifications in 'TO' config. Fiddle is here: Sencha Fiddle

If you try to drag the window by clicking on the "blue title", you will see the entire title how it should be, but thats it.

Anyone know if I need to specify something else here?

Upvotes: 0

Views: 155

Answers (2)

twaindev
twaindev

Reputation: 1

width: '50%'

also seems to work.

Upvotes: 0

David Huculak
David Huculak

Reputation: 332

I tinkered with it a bit and found that it worked if you set the width property on the window:

width: Ext.getBody().getViewSize().width / 2,

Full code:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.Window', {
            id: 'win',
            title: "Window",
            width: Ext.getBody().getViewSize().width / 2,
            html: "<h1>Hello</h1> ",
            listeners: {
                show: function (win) {
                    var el = win.getEl();
                    var size = Ext.getBody().getViewSize();
                    el.animate({
                        from: {
                        opacity: 0,
                        width: 0,
                        height: 0,
                        x: size.width/2,
                        y: size.height/2
                    },
                    to: {
                        opacity: 100,
                        width: size.width/2,
                        height: size.height/2,
                        x: size.width/4,
                        y: size.height/4
                    },
                    
                    });
                },
                beforeclose: function (win) {
                    if (!win.shouldClose) {
                        win.getEl().fadeOut({
                            duration: 2000,
                            callback: function () {
                                win.shouldClose = true;
                                win.close();
                            }
                        });
                    }
                    return win.shouldClose ? true : false;
                }
            }
        }).show();

    }
});

Upvotes: 0

Related Questions