Results 1 to 10 of 10

Thread: Spreading elements vertically to use all space

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    39
    Answers
    3

    Default Answered: Spreading elements vertically to use all space

    Hi,

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

    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?

    after.jpg

    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,

  2. 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.

    http://jsfiddle.net/sdt6585/eTPVm/64/

    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.

    -Stephen

  3. #2
    Sencha User
    Join Date
    Mar 2012
    Location
    Oklahoma, USA
    Posts
    52
    Answers
    10

    Default

    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.

  4. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Typically, you would just stretch the panels and not the space between the editors:
    http://jsfiddle.net/eTPVm/

    Scott.

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Location
    Oklahoma, USA
    Posts
    52
    Answers
    10

    Default

    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:

    http://jsfiddle.net/sdt6585/eTPVm/23/

  6. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    39
    Answers
    3

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

    Thank you very much,


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

    third.jpg

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Location
    Oklahoma, USA
    Posts
    52
    Answers
    10

    Default

    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.
    http://jsfiddle.net/sdt6585/eTPVm/33/

    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,
    Stephen

  8. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    39
    Answers
    3

    Default Thanx, and here what I'm trying to do:

    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:

    fifth.jpg



    forth.jpg

  9. #8
    Sencha User
    Join Date
    Mar 2012
    Location
    Oklahoma, USA
    Posts
    52
    Answers
    10

    Default

    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.

    http://jsfiddle.net/sdt6585/eTPVm/64/

    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.

    -Stephen
    Last edited by sdt6585; 18 Oct 2012 at 5:40 AM. Reason: Update JS fiddle link

  10. #9
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Answers
    20

    Default

    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.

  11. #10
    Sencha User
    Join Date
    Oct 2012
    Posts
    39
    Answers
    3

    Default

    it Works !!!!!

    Thank you very very much

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •