ExtJS - анимация окна справа налево - PullRequest
Новая
       20

ExtJS - анимация окна справа налево

0 голосов
/ 12 января 2019

Я использую Ext JS classic 6.2 и создал анимацию ниже:

enter image description here

Что я хочу сейчас сделать, так это заставить окно выглядеть растущим справа налево. Возможно ли это?

Мой код: 

listeners: {
    afterrender: 'afterrender',
    close: () => MCLM.DrawHelper.finish(),
    show: (win) => {
        var painelEsquerdo = Ext.getCmp('painelesquerdo');
        var painelCentral = Ext.getCmp('painelCentral');
        var drawBtn = Ext.getCmp('drawBtn');

        win.setMinWidth(0);
        win.setX(painelEsquerdo.getWidth() + painelCentral.getWidth() - win.getWidth());
        win.setY(drawBtn.getY());
        win.setMinHeight(drawBtn.getHeight());
        win.setHeight(drawBtn.getHeight());

        var oldSize = win.getWidth();
        win.setWidth(0);

        win.animate({
            duration: 300,
            to: {width: oldSize}
        });
    }
}

1 Ответ

0 голосов
/ 13 января 2019

решаемая. Код: 

listeners: {
    show: (win) => {
        var painelEsquerdo = Ext.getCmp('painelesquerdo');
        var painelCentral = Ext.getCmp('painelCentral');
        var drawBtn = Ext.getCmp('drawBtn');

        // Efeito de expansão partindo do tamanho zero
        win.setMinWidth(0);

        var oldSize = win.getWidth();

        // Por alguma razão, a janela aparece uma vez antes da animação começar onde X estiver setado 
        // por isso, o width é zerado e o X é jogado para fora da tela
        win.setWidth(0);
        win.setX(-9999);

        // Alinhamento com o botão do menu
        win.setMinHeight(drawBtn.getHeight());
        win.setHeight(drawBtn.getHeight());
        win.setY(drawBtn.getY());

        // Em 150 milissegundos, diminui o X para a esquerda e aumenta o width para a direita
        win.animate({
            duration: 150,
            from: {
                width: 0,
                x: painelEsquerdo.getWidth() + painelCentral.getWidth()
            },
            to: {
                width: oldSize,
                x: painelEsquerdo.getWidth() + painelCentral.getWidth() - oldSize
            }
        });
    }
}

Что мне нужно было сделать, это уменьшить X и увеличить ширину окна с 0, чтобы каждая итерация перемещала X влево (уменьшая его значение) и увеличивала ширину окна вправо.

...