Implementing Basecamp project management UI (stacked windows)

Hi All,

I am trying to implement something similar to BaseCamp project management UI in ExtJs The link

http://ift.tt/wQ6Qtp describes it. See the image attached for detail

How to achieve it.
My approach to implement stacked window is:

1) Add a base panel to viewport

Code:

            
            width:'100%',
             height:'auto',
             id:'basePanel',  
             layout:'fit',
             autoScroll:true,
             style: {
                    overflow: 'auto'
             },

2) Add panels with floating property set true to this as per requirement, contents are added later to these. this is one of the window, that i am adding

Code:

             
                        xtype:'container',
                         id:'floater',                           
                         height:'100%',
                         floating:true,
                         closable:true,
                         width:'90%',


                         style: {
                          /*  overflow: 'auto',*/
                           'z-index':1,
                          },  
                                  items:[],//array of items that cause overflow

Everything is working fine except,

a) when the contents to be shown are larger than the available height, then every window is getting scroll bars, i want only the outermost panel to have scrollbar, and no matter how many stacked windows are getting added to it, and the contents, by scrolling the outer most panel, we can see all the content.

b)I am also having trouble in positioning the windows, one over other as shown in the figure. I am manuaally setting the position of windows.

Is there any other approach of achieving the same?