EXT.JS怎样把一个window弹窗组件实现成一个从右往左展开的抽屉效果

可以通过在 window 的 show 和 hide 事件中，使用 Ext.fx.Anim 动画效果，实现一个从右往左展开的抽屉效果。具体实现步骤如下：

1. 创建一个 window 组件，并设置宽度为 300，高度为 400，x 坐标为屏幕右侧：

var win = Ext.create('Ext.window.Window', {
    width: 300,
    height: 400,
    x: Ext.getBody().getWidth(),
    y: 0,
    layout: 'fit',
    items: [{
        xtype: 'panel',
        html: '这是一个弹窗组件'
    }]
});

2. 在 window 的 show 事件中，使用 Ext.fx.Anim 动画效果，将窗口从右侧展开到屏幕中央：

win.on('show', function() {
    Ext.create('Ext.fx.Anim', {
        target: win,
        duration: 500,
        to: {
            x: Ext.getBody().getWidth() - win.getWidth()
        }
    }).run();
});

3. 在 window 的 hide 事件中，使用 Ext.fx.Anim 动画效果，将窗口从屏幕中央收起到右侧：

win.on('hide', function() {
    Ext.create('Ext.fx.Anim', {
        target: win,
        duration: 500,
        to: {
            x: Ext.getBody().getWidth()
        },
        listeners: {
            afteranimate: function() {
                win.destroy();
            }
        }
    }).run();
});

在这个实现中，我们使用了 Ext.fx.Anim 动画效果中的 to 属性，来设置动画结束时的目标位置。同时，我们也可以在动画结束后，通过监听 afteranimate 事件，在窗口关闭后，销毁窗口组件。