Question

我正在使用Ext JS classic 6.2，并创建了以下动画：

我现在要做的是使窗口从右到左逐渐增大。有可能吗？

我的代码：

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}
        });
    }
}

Answer 1

已解决。代码：

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移到左侧（减小其值）并将窗口的宽度增加到右侧。

ExtJS-窗口动画从右到左

1 个答案: