PDA

View Full Version : Implementing Basecamp project management UI (stacked windows)



vardhan22
14 May 2014, 6:07 AM
Hi All,

I am trying to implement something similar to BaseCamp project management UI in ExtJs The linkhttp://vimeo.com/36917486 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


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


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?

Gary Schlosberg
16 May 2014, 3:17 PM
That video is about 2 years old. In which version of ExtJS are you running this? It might also be helpful to post the version it was written to work with.

vardhan22
16 May 2014, 7:00 PM
The type of looks and feel provided in that video was implemented in ruby in rails. I want to achieve something similar in ExtJs 4.1.1 for a client requirement. Need some idea regarding that