View Full Version : Custom Layout: Rows, with multiple Columns, that Expand

25 Oct 2012, 8:25 PM
I'm hoping someone can help me with this.

Since upgrading to ExtJS4.1 i need to redo my layouts, and so far my attempts to make a complex expandable form with a specific layout seem to disappear the minute i import them into the existing project... components still all there, but the row shows up empty. (they were visible when previewed in the project i made them in)

Here's where they have to go:

In a Border layout Viewport i have a;
Center region Container(3) which contains;
A Container(3) which has;
A tab-panel and a Form Panel which has;
Two Fieldsets(2), one of which has;
FieldContainers(1) I've been using for each row
(1)(2) - I don't *need* to use Fieldsets or FieldContainers, but the web interface i am basing this off breaks stuff down in a visually very similar way... So why not use them? I can replicate the appearence of the FieldContainer if that is causing problems, by putting a label and a container inside another container. If I can continue to use the Fieldset and get the layout i want than i want to that

(3) - Why am i using a container with nothing but a container in it? ExtJS4.0 wouldn't let you directly touch certain stuff about a border layout, so i needed to encapsulate it. The center region was meant to act like a frame on a web browser, loading different 'pages'... in this case different Panels were created and then replaced the the one that wasn't directly inside a border layout

What i'd like to do:

Imagine if you will a web page. You have something that looks like a table, except the cells don't line up. You change the CSS to make the borders visible to find either:
Each line is a different table... The first column of each row is a fixed width, then the rest are broken up based on distribution of percent
The table has only two rows... The first column of each row is a fixed width, but the second column contains a different new table on each row broken up based on distribution of percent
The titles for each row have the same width, but everything else expands out as it gets more room. Anyone got any suggestions?

25 Oct 2012, 10:07 PM
Perhaps I've misunderstood but isn't this just a vbox with hbox children? So that's a vbox on the fieldset and an hbox on the fieldcontainers. The first child of the fieldcontainer would then be fixed width and the others would flex. Alternatively use the label as the first child, which I suspect may be what you're doing already.

Take a look at the first demo in the docs for fieldcontainer:


Isn't that pretty much what you want just with more rows?