[CLOSED] Table Layout, 100% width Table

  1. #1

    [CLOSED] Table Layout, 100% width Table

    Hi all

    I need a Tablelayout which fills 100% of a Viewport Center...
    I tried that:

      <ext:Viewport runat="server" Layout="Fit">
        <Items>
          <ext:BorderLayout runat="server">
            <North>
              <ext:Panel Collapsible="true" Title='<%$ I18n: ProductArrangement.SearchTitle %>' ID="SearchPanel" Region="North" runat="server" Height="150">
                <Content>
                  <uc1:ArrangementSearch ID="ArrangementSearch1" runat="server" SearchMode="InvolvedParty" Visible="true" />
                </Content>
              </ext:Panel>
            </North>
            <Center>
              <ext:Panel runat="server" Border="false" Padding="15"  Layout="Fit" >
                <Items>
                  <ext:TableLayout runat="server" Columns="4" >
                    <Cells>
                      <ext:Cell ColSpan="4">
                        <ext:Panel runat="server" Title='<%$ I18n: ProductArrangement.DisplayName %>' >
                          <Items>
                            <ext:TextField runat="server" ID="txtDisplayName" />
                          </Items>
                        </ext:Panel>
                      </ext:Cell>
                      <ext:Cell ColSpan="4">
                        <ext:Panel ID="Panel1" runat="server" Title='<%$ I18n: ProductArrangement.Text %>' >
                          <Items>
                            <ext:TextArea runat="server" ID="txtText" Height="150" />
                          </Items>
                        </ext:Panel>
                      </ext:Cell>
                      <ext:Cell RowSpan="4">
                        <ext:Panel ID="Panel2" runat="server" Title='<%$ I18n: ProductArrangement.Note %>' >
                          <Items>
                            <ext:TextArea runat="server" ID="txtNote" Height="150" />
                          </Items>
                        </ext:Panel>
                      </ext:Cell>
                    </Cells>
                  </ext:TableLayout>
                </Items>
              </ext:Panel>
            </Center>
          </ext:BorderLayout>
        </Items>
      </ext:Viewport>
    Dosn't work !
    Any Idea to Fit the Tablelayout to 100% ?

    Kind Regards
    Peter
    Last edited by Daniil; May 21, 2011 at 12:07 PM. Reason: [CLOSED]
  2. #2
    Hi,

    TableLayout doesn't support fitting cells sizes to container's size. It's rather a weak layout.

    What layout do you need? Could you draw it?
  3. #3
    I need a Layout like that :

    Click image for larger version. 

Name:	Unbenannt.jpg 
Views:	941 
Size:	40.5 KB 
ID:	2755

    Viewport with a 100% Width Table construct in the Center...

    Regards
    Peter
  4. #4
    Hi,

    This should be close.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
           
            <ext:Viewport runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel runat="server" Title="North" Region="North" Height="150" />
    
                    <ext:Container runat="server" Region="Center" Layout="VBoxLayout">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:Container runat="server" Layout="HBoxLayout" Flex="1">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Panel runat="server" Title="Cell 1 (25%)" Flex="1" />
                                    <ext:Panel runat="server" Title="Cell 2 (75%)" Flex="3" />
                                </Items>
                            </ext:Container>
                            <ext:Panel runat="server" Title="Cell 3 (100%)" Flex="1" />
                            <ext:Container runat="server" Layout="HBoxLayout" Flex="1">
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Stretch" />
                                </LayoutConfig>
                                <Items>
                                    <ext:Panel runat="server" Title="Cell 4 (50%)" Flex="1" />
                                    <ext:Panel runat="server" Title="Cell 5 (50%)" Flex="1" />
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                    
                    <ext:Panel runat="server" Title="South" Region="South" Height="150" />
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Hope this helps.
    Geoffrey McGill
    Founder
  5. #5
    Geoffrey that's not close, that's perfect :-)

    What I don't understand is the 'Flex' property !
    What does it do ?

    Peter
  6. #6
    Hi,

    See also docs for description of .Flex property,

    http://dev.sencha.com/deploy/ext-3.3...ut&member=flex

    The "Flex" is basically a ratio value.

    Example 1

    Given the following example of three Panels:

    1. Panel1, .Flex=1
    2. Panel2, .Flex=2
    3. Panel3, .Flex=1

    The sum of all .Flex properties is 1+2+1=4.

    The width (or height) ratio calculations for each Component will be based upon the value of the .Flex property divided by 4.

    Panel1 will stretch to fill 1/4 (25%) of the Height (if VBoxLayout) or Width (if HBoxLayout).

    Panel2 will stretch to fill 2/4 (50%) of the Height or Width.

    Panel3 will stretch to fill 1/4 (25%) of the Height or Width.

    Example 2

    If were to add a fourth Panel to the .Item Collection with a .Flex=1, the following ratios would be calculated.

    1. Panel1, .Flex=1 ---> 1/5 = 20%
    2. Panel2, .Flex=2 ---> 2/5 = 40%
    3. Panel3, .Flex=1 ---> 1/5 = 20%
    4. Panel4, .Flex=1 ---> 1/5 = 20%

    Example 3

    You can also define a fixed width (or height if VBoxLayout) for the Panels. When calculating the positioning of items within the Container, first the fixed width/height items are removed from the total. Ratios are then calculated based upon the remaining width/height, less any fixed widths/heights.

    In the next sample Panel1 is given a fixed width of '150' pixels. We'll assume the Parent Container is 950px wide. Here's the calculations:

    1. Panel1, .Width="150" ---> 150px wide

    Panel1 be 150px wide and remaining Panels will proportionally split the remaining width (950 - 150 = 800px) based upon a ratio of their .Flex values.

    2. Panel2, .Flex=1 ---> 1/4 = 25% x 800px = 200px
    3. Panel3, .Flex=2 ---> 2/4 = 50% x 800px = 400px
    4. Panel4, .Flex=1 ---> 1/4 = 25% x 800px = 200px


    Hope this helps.
    Last edited by geoffrey.mcgill; May 26, 2011 at 6:48 AM.
    Geoffrey McGill
    Founder

Similar Threads

  1. Replies: 1
    Last Post: Jun 22, 2012, 2:06 PM
  2. Table Layout Problem with IE Compatibility
    By tugrul in forum 1.x Help
    Replies: 2
    Last Post: May 02, 2011, 8:16 AM
  3. [CLOSED] [1.0] How to apply CSS class for Cells in Table Layout.
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 20, 2010, 6:35 PM
  4. [CLOSED] [1.0] Portal with Layout="Table"
    By betamax in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 16, 2010, 5:02 PM
  5. [CLOSED] Table layout width in %
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 22, 2009, 4:14 PM

Tags for this Thread

Posting Permissions