ExtJS - 从右到左的窗口动画答案

【问题标题】：ExtJS - Window animation from right to leftExtJS - 从右到左的窗口动画
【发布时间】：2019-01-13 05:00:05
【问题描述】：

我正在使用 Ext JS 经典 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}
        });
    }
}

【问题讨论】：

您的代码看起来很奇怪——我只会在边缘情况下使用 Ext.getCmp。通常，更好的解决方案是将您的处理程序委托给控制器（您正在使用 afterrender 做什么），然后使用 lookup 方法通过引用获取组件。
是的。我将代码移至窗口控制器。我正在使用 Ext.getCmp 因为该组件是一个窗口，而其他组件是外部的 tabpanels，所以我不能使用 window.down()
查找与向下查找不同
从未使用过。我会仔细看看的！谢谢

标签： extjs extjs6 extjs6-classic

【解决方案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 向左移动（减小其值）并向右增加窗口宽度。

【讨论】：