PDA

View Full Version : Layout Best Practices



aarontm
20 Feb 2011, 11:58 PM
I am new to ExtJS and I am unsure what layout methods to use for some apps I am working on.

I am trying to create some "website-like" layouts (an intermixing of sliced graphics and dynamic regions) with no borders / panels / extra decoration in between

Coming from recently doing a lot of (Adobe) Flex, where VBox & HBox are the main layout tools these appeal to me but I am only really seeing them used in extJS examples to layout forms and the like, while seeing a preference for Border layouts - would it be reasonable to lay everything out with vbox/hbox?

The "table" layout also looks attractive for complex layouts and is shown as a layout example but is this best practices? I believe it creates an actual table in the DOM? Does the "for tabular data only tables are bad" not apply here?

tl;dr: Is the "table" layout a legitimate option? Is pure vbox/hbox? Is there a performance or accessibility hit?

thanks in advance

Grolubao
21 Feb 2011, 1:58 AM
In our case what we normally do if we're starting from scratch is using a Viewport with a border layout. This way you know that occupies the whole space and you can define regions out of it, being center the one that you want to expand.

Now, you can also use the viewport and use regions that pick up a contentEl if you already had some divs defined.

Condor
21 Feb 2011, 5:57 AM
Yes, there is no problem with using vbox/hbox layouts only.

I wouldn't recommend table layout though (it doesn't manage child sizes, which makes it's use rather limited).

21 Feb 2011, 6:48 AM
Yes, there is no problem with using vbox/hbox layouts only.

I wouldn't recommend table layout though (it doesn't manage child sizes, which makes it's use rather limited).

Indeed. It also is not dynamic like the other layouts.

aarontm
21 Feb 2011, 9:26 PM
Thanks for the responses guys!

As I've read further, I am actually thinking I want to use regions (north/south for header/footer - which is only possible with a Border layout, right?) and use VBox / HBox to lay out the "center" - which seems best practicey. Pure Vbox/HBox would work as well, I'm wondering if there is an advantage, I guess I'm assuming it's easier to make a region fixed in place, is there any other advantages or disadvantages?

I also wonder if there will be any changes in layout practices in ExtJS 4 and about accessibility and resizing - but it seems if I stay away from the table layout I should mostly be good there.

@ JGarcia - I actually read the table excerpt from ExtJS In Action on ajaxian so if you're not supporting it that is definitive :) I was thinking about buying the Ext 3 book - When do you think the 4.0 version will drop? Is there enough crossover that I would benefit from the current version even though I'm already developing on 4.0? I love the Manning "in action" series, will def be picking up both Sencha Touch & ExtJS 4 when they come out

thanks again to all