Is there a way to have two Ext.Windows and have the rest of the page masked?

What I'm trying to do is to have one window visible and when you press the left arrow button, then the window slides off the screen to the left while another window slides on to the screen from the right.

Any suggestions would be appreciated.

So far I have the following:

http://digitaldarwin.com/slide.html

PHP Code:
<html>
<
head>
    <
script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
    <script>
        Ext.onReady(function(){

            win1 = new Ext.Window({
                layout:'fit',
                width:500,
                height:300,
                closeAction:'hide',
                plain: true,
                modal: true,
            });

            win2 = new Ext.Window({
                layout:'fit',
                width:500,
                height:300,
                closeAction:'hide',
                plain: true,
                modal: true,
            });

            win2.show(this);
            //win1.show(this);

            var nav = new Ext.KeyNav(win2.el, {
                "left" : function(e){
                    this.el.shift({
                        x:-500
                    });
                },
                "esc" : function(e){
                    this.close();
                },
                scope : win2
            });

        });
    </script>
</head>
<body>
</body>
</html> 
Thanks