How in the world can this layout be achieved?

[mprice]

I came across this product, built with ExtJS, that has a graphical workflow designer. We have something very similar (non-competing product) but ours is written using an IE-specific XML-XSLT-HTML method. We need to rewrite in ExtJS. Anyone have any idea how this type of layout could be achieved?? We have tried anchor, column, table, vbox, hbox, and have not had much success.

14346

http://www.cmswire.com/cms/web-cms/day-softwares-new-cq5-web-cms-has-arrived-003535.php

[Condor]

'absolute' layout off course!

[mprice]

Thanks for the reply! OK, I could probably see how the schema can be traversed to determine proper x,y coordinates for each step. Any thoughts on how the connector lines can be achieved?

[Animal]

Did you poke that page with Firebug to see how they did it?

[mprice]

Alas, the app is not available....only screenshots. I asked for access to an eval, but don't expect that it will be easy without going through their sale cycle.

[Animal]

OK. Of course if you can calculate some x,y coordinates, horizontal, and vertical lines are pretty easy to create with simple DIVs.

And the icons could just be absolutely positioned IMGs

[mprice]

You guys were right, absolute layout is the way to go. Thanks for the insight!

14348


var absolute = {
id: 'absolute-panel',
border:false,
layout: 'absolute',
region:'center',
defaults: {
width: 200,
height: 100,
frame: true,
html:'step'
},
items:[{
title:'1', x:100, y:100
},{
title:'2', x:300, y:300
},{
title:'3', x:300, y:500
},{
x:400, y:400, width:1, frame:false
},{
x:400, y:250, width:1, height:50, frame:false
},{
x:200, y:250, height:1, frame:false, bodyStyle:'border-bottom:0'
},{
x:200, y:200, width:1, height:50, frame:false
},]
};


Hardest part will be to write the recursive algorithm that sets the correct x/y position for each step, as the depth of children and branching is variable.