1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    25
    Vote Rating
    0
    Plasma is on a distinguished road

      0  

    Default hbox layout: First item = min width, second item = max width?

    hbox layout: First item = min width, second item = max width?


    Hi,

    I was wondering earlier today how I would go about using the hbox layout (which I assume is the right one for this instance) in rendering a layout that contained two items.

    The first item was a Panel, and within the Panel would be a variable-width amount of items (and so the panel should resize itself to a certain width automatically - I had hoped).

    The second item was another Panel, but I wanted it to take up the remaining width of the container.

    I tried simply adding the first panel with no flex or fixed width attribute, and then tried placing the second panel with flex: 1 to try and take up the remainder of the space.

    The results were not desirable; instead of the first panel just taking up 'enough space' that it needed to show its inner contents, it was either hidden because of the second flex: 1 or some other problem.

    What is the correct way to:
    * Show two columns in the container
    * The first column should take up as least amount of space as possible (depending on its item contents - which also may be dynamic in width, etc)
    * The second column should take up the remainder of the space

    I get the feeling I need to tell ExtJS that an item should either have a fixed width, or tell it to take up a ratio of the available container space. There doesn't seem to be a way to say 'take up as much space as you need, but nothing more'.

    Cheers

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    How is auto width to be determined? Can you think of a way?

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    25
    Vote Rating
    0
    Plasma is on a distinguished road

      0  

    Default


    I'd like it to use whatever logic the browser users - for example:

    1) The left item is a table (actually, is a Panel with table layout) and it contains a few rows/columns. I'd like this to be as large as possible but nothing larger.

    2) The right item can take up the full width.

    If I simply had two div's (or perhaps the first was a span with display: block) and floated them to the left; it would work as expected.

    Not sure how to do the same w/ ExtJS.

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    ColumnLayout or Animal's FloatLayout would probably work.

Similar Threads

  1. Min/Max width according to the container size
    By mickA in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 2 Feb 2010, 3:02 AM
  2. Combo box: item list's width doesn't match combo width
    By dante in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 10 Jul 2009, 8:02 AM
  3. Problems to set min width layout
    By brazhuca in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 30 Oct 2008, 5:37 AM
  4. Col max & min width
    By Rose23 in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 1 Oct 2008, 12:39 AM
  5. Custom layout with [min] and [max] width ?
    By exception in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 25 Sep 2008, 7:43 AM

Thread Participants: 2