1. #1
    Ext User
    Join Date
    Jan 2011
    Location
    California, USA
    Posts
    2
    Vote Rating
    0
    jeremyosborne is on a distinguished road

      0  

    Default Help with the Ext js height 100% idiom

    Help with the Ext js height 100% idiom


    Hi all,

    Just started using Ext.js, evaluating it for a project.

    Everything seems pretty self explanatory to me except for the idiom that I've come to love in plain old JavaScript/CSS/HTML where I can force box elements to fill in a 100% height. The following is some code of what I'm talking about.

    <!DOCTYPE html>
    <html>
    <head>
    <title>vertical height example</title>
    <style>
    html, body { width:100%; height:100%; }
    #outer { height:100%; width:100%; border:1px solid black; }
    #inner { height:100%; width:50%; border:1px solid black; }
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="inner">inner</div>
    </div>
    </body>
    </html>

    If you drop this in a page, inner, by having a height of 100% will vertically fill out the page.

    What I want is to be able to drop a Panel inside of another Panel in Ext.js and just say something to the equivalent of "height:100%" and have the child panel expand to 'fit' the outer panel.

    Yes, I have read the docs about layout:'fit' but it only works for a single child panel. I want, say, a fitted tab panel to contain a panel with an hbox layout, and each panel child within the hbox to also fill be fit to the maximum height.

    Has anyone else run into a nice, easy solution for vertically filling out the height of panels to 100% of the parent height without needing to use layout:'fit'?

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Location
    Bay Area
    Posts
    152
    Vote Rating
    1
    mmullany is on a distinguished road

      0  

    Default


    Always handy to use the layout browser: http://dev.sencha.com/deploy/dev/exa...t-browser.html

    to see examples. If you click on the hbox example, I think you're looking for align : stretch?

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,087
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    In many instances fit will do what you want. However it sounds like what you are looking for is the align configuration in the box layouts.

    Have you tried align: 'stretch' within your hbox/vbox layout with flexes on each individual box?

    If this isn't what you're looking for, could you post a snippet of code showing what you are using and then maybe an image to show what you want instead?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  4. #4
    Ext User
    Join Date
    Jan 2011
    Location
    California, USA
    Posts
    2
    Vote Rating
    0
    jeremyosborne is on a distinguished road

      0  

    Default


    Thank you guys for the replies. I just re-did my practice, skeletal layout I and a layoutConfig of {align:"stretch"} in my hbox panel layouts is what did the trick. For some reasons I was ignoring the semantics of the align and was not including it. Perhaps I'm just scarred by the years of "oh, just ignore that valign CSS setting" that maybe I don't even look at *align settings anymore?

    I'll mess with the layout again, but I believe this solves my major remaining problem for the moment.

    Hope you all have a great weekend.

Similar Threads

  1. Ext.Panel height: 100% best method?
    By SlashEMc2k in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 8 Jun 2011, 6:05 AM
  2. Giving Ext.Panel 100% height?
    By PCSpectra in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 20 Nov 2009, 12:07 PM
  3. Grid with width: 100% and height: 100%
    By PHP Detonator in forum Ext 2.x: Help & Discussion
    Replies: 11
    Last Post: 14 Nov 2008, 9:46 AM
  4. how to customize the htmleditor's height? "height:100" has no effect
    By aeonsun in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 11 Dec 2007, 3:10 AM

Thread Participants: 2

Tags for this Thread