View Full Version : Spreading elements vertically to use all space

16 Oct 2012, 3:45 AM

I have these panels with fields (all render to main panel):

I want to use all height of the main panel - so the height of the sub panels is dynamic depending on the screen resolution or height and always cover the main panel, and fields in every sub panel will cover all panel's space (height), something like this (I done it by photoshop), how can I done it in extjs?


I tried the 'flex' and 'vbox' layout but when done this it strech the control !!!! I don't want to strech the control!!

Thank you,

16 Oct 2012, 5:37 AM
What is the layout in the individual panels? I would imagine a vbox layout with flex set to the count of items for each sub container would be most appropriate for the outer contianer and then maybe an anchor layout on the interior panels.

Another alternative would be to use the accordion layout with whatever the options for having multiple panels open at once is. I find that it gives an attractive look for situations like what you've got there.

16 Oct 2012, 5:53 AM
Typically, you would just stretch the panels and not the space between the editors:


16 Oct 2012, 6:13 AM
Extending Scott's example, this is what I was talking about in setting the flex property to count of the number of items contained by each panel:


17 Oct 2012, 5:25 AM
Thank you very much,

Ok, but is there any way to make space dynamically between fields to cover all panel:


17 Oct 2012, 5:46 AM
Not sure exactly what you're asking. If you just want to stretch the fields to the full width of the container, I suggest an anchor layout on the sub panels with the anchor attribute set to '100%' on the fields or in the defaults variable on the sub panel.

If you want the fields vertically centered, I'm not positive. I would think something like using the vertical align property of tables would be the best route, putting each field in it's own row/cell with the table fit to the sub panel. Here's a link describing that process with raw css/html, it would take me a little longer than I have right now to write it up in Ext:

(http://blog.themeforest.net/tutorials/vertical-centering-with-css/)Best of luck,

17 Oct 2012, 9:31 PM
I want the vertical space between TEXTFIELDS to be dynamic depending on parent height, I have seen that I may use margin property for fields but is there any way to use values with "%" instead of FIX number?

I also tried: layout: {type: 'vbox',align: 'stretch'} and use 'flex:1' in the items but there was one problem the edit box STRECHED it self !!!! see this pic, it would be great solution if the textfields doesn't stretch:



18 Oct 2012, 5:39 AM
I don't know that I would use this in production code, but setting each sub-panel to vbox and stretch then nesting the fields inside of containers allows the container to stretch without affecting the field it contains. You can then use some css to get them a little closer to what you were going for. It ends up pretty convoluted in my opinion but it does seem to work like you're wanting it to.


An alternative would be to write your own layout manager but my attempts at that have been a little less than stellar. I've gotten a few things to work before but it's not a simple or well documented process. That would avoid all the css and nesting though since you would just do those things in the layout process. If you are interested in pursuing that option, I would suggest reading through the source code for the existing layouts that come with Ext, in particular the vbox code and all it's parent classes/mixins.


James Goddard
18 Oct 2012, 6:20 AM
Set the layout to vbox. Give all of the edit fields a fixed hight but insert, between each field, an empty "box" control with flex: 1. The edit fields will then stay the same size but the "spacers/empty controls" will stretch to fit.

22 Oct 2012, 10:08 PM
it Works !!!!!

Thank you very very much:D