Extjs 轻松实现窗口右下角短消息提示功能

Extjs 轻松实现窗口右下角短消息提示功能

Extjs 轻松实现窗口右下角短消息提示功能的基本原理：（基于Extjs3.0版本）

分别创建2个窗体，2个窗体相互切换，当现实A时B退出，当现实B时A退出。里面带有动画效果。

    <script type="text/javascript">
        Ext.onReady(function () {
            var eBody = Ext.getBody();

            //短消息窗基本配置
            var msgWinConfig = { width: 300, height: 200 };
            var openMsgWinConfig = { width: 53, height: 40 };

            var openMsgWin = new Ext.Window({
                closable: false, shadow: false, resizable: false, x: eBody.getWidth() - openMsgWinConfig.width, y: eBody.getHeight() - openMsgWinConfig.height,
                width: openMsgWinConfig.width, height: openMsgWinConfig.height
                , items: [{ xtype: 'button', text: '打开', layout: 'fit', handler: function () { msgWin.flyIn(); } }]
                , flyIn: function () {
                    var myWin = openMsgWin;
                    myWin.show();
                    myWin.getEl().shift({ x: eBody.getWidth() - myWin.getWidth(), y: eBody.getHeight() - myWin.getHeight() });
                }
                , flyOut: function () {
                    if (!this.isVisible()) { return; }
                    var myWin = openMsgWin;
                    myWin.getEl().shift({ x: eBody.getWidth() - myWin.getWidth(), y: eBody.getHeight() });
                }
            });


            var msgWin = new Ext.Window({
                resizable: false,
                x: eBody.getWidth() - msgWinConfig.width, y: eBody.getHeight(), width: msgWinConfig.width, height: msgWinConfig.height, shadow: false
                , items:
                [

                ]
                , listeners: {
                    beforeclose: function () {
                        var win = this;
                        win.flyOut();
                        return false;
                    }
                }
                , flyIn: function () {
                    var myWin = this;
                    myWin.show();
                    myWin.getEl().shift({
                        x: eBody.getWidth() - myWin.getWidth(),
                        y: eBody.getHeight() - myWin.getHeight(),
                        opacity: 80,
                        easing: 'easeOut',
                        duration: .35
                    });
                    openMsgWin.flyOut();
                    myWin.isFlyIn = true;
                }
                , flyOut: function () {
                    var myWin = this;
                    myWin.getEl().shift({
                        y: eBody.getHeight()
                    });
                    openMsgWin.flyIn();
                    myWin.isFlyIn = false;
                }
                //自动设置位置
                , autoPosition: function () {
                    if (this.isFlyIn) { this.flyIn(); } else { this.flyOut(); }
                }
            });

            Ext.EventManager.onWindowResize(function () {
                msgWin.autoPosition();
            });

            msgWin.flyIn();
        })
    </script>