[CLOSED] ViewPort and fixed body width

  1. #1

    [CLOSED] ViewPort and fixed body width

    Hi,

    how can I use ViewPort and at the same time set a fixed body width i.e. to 960 (like this forum application)?

    I have a vertically scrollable grid on my page and I would like to use the full height of the page to show as more rows as possible but if I use a ViewPort it take up all the page (also horizontally).

    Thanks in advance.

    Marco
    Last edited by Daniil; Aug 09, 2012 at 6:00 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please use HBoxLayout.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="HBoxLayout">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
                </LayoutConfig>
                <Items>
                    <ext:Container runat="server" Width="960" StyleSpec="background: red;" />
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  3. #3
    Thank you Daniil.
    I tried to put a fixed height panel above my grid and now the grid doesn't strecth anymore.
    Did I anything wrong?
    M

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test3.aspx.cs" Inherits="renosistemi.it.Test3" %>
    <%@ 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 xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager runat="server" />
            <ext:Viewport ID="Viewport1" runat="server" Layout="HBoxLayout">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
            </LayoutConfig>
            <Items>
    
                <ext:Container ID="Container1" runat="server" Width="1200"  Layout="FitLayout" >
                <Content>
    <ext:FormPanel ID="FormPanel1" runat="server" BodyPadding="5" Width="270" Height="180">
                <Items>
                    <ext:TextField ID="TextField1" runat="server" FieldLabel="Field1" Note="Description" />
                    <ext:TextField ID="TextField2" runat="server" FieldLabel="Field2" Note="Description" />
                    <ext:TextField ID="TextField3" runat="server" FieldLabel="Field3" Note="Description" />
                    <ext:TextField ID="TextField4" runat="server" FieldLabel="Field4" Note="Description" />
                </Items>
            </ext:FormPanel>
                    <ext:GridPanel ID="GridPanel1" runat="server" AutoExpandColumn="Column1"  >        
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2"  />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" ColumnID="Column1" Header="Test1" DataIndex="test1" />
                            <ext:Column runat="server" Header="Test2" DataIndex="test2" />
                            <ext:Column runat="server" Header="Test3" DataIndex="test3" />
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel></Content>
                </ext:Container>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  4. #4
    1. You should use Items for Ext.NET components instead of Content.

    2. FitLayout supports only one item. You can use VBoxLayout instead.
    https://examples2.ext.net/#/Layout/VBoxLayout/Basic/

    You should set up
    Flex="1"
    for the GridPanel and
    Align="Stretch"
    for the VBoxLayoutConfig.
  5. #5
    Thanks, the solution is nearer.
    I tried to set
    BodyStyle="background-color: transparent;"
    on almost every element but I still get a cyan background on a container.

    The debug finds the following matching css on Container1:

    .x-border-layout-ct {
    background-color: #DFE8F6;
    position: relative;
    }
    How can I disable this automatic background color?

    Marco


    <%@ Register src="~/Controls/HeaderReno.ascx" tagname="HeaderReno" tagprefix="uc2" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager runat="server" />
            <ext:Viewport ID="Viewport1" runat="server" Layout="HBoxLayout" BodyStyle="background-color: transparent;" >
            <LayoutConfig>
                <ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
            </LayoutConfig>
            <Items>
    
                <ext:Container ID="Container1" runat="server" Width="960"  Layout="BorderLayout" BodyStyle="background-color: transparent;">
                <Content>           
                    <ext:Panel 
                    ID="btns" 
                    runat="server"
                    Region="Center" 
                    Layout="FitLayout"     
                    Border="false"
                    BodyStyle="background-color: transparent;"
                    >
                    <Items>
    <ext:Panel 
                ID="pnlFlexStretch" 
                runat="server"
                Layout="VBoxLayout"
                Border="false"
                BodyStyle="background-color: transparent;"
                 >
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
                    <ext:Container ID="Container2" runat="server" Flex="2" BodyStyle="background-color: transparent;"  >
                    <Content>
                    <uc2:HeaderReno ID="HeaderReno1" runat="server" />
                    </Content>
                    </ext:Container>
    
                    <ext:Button ID="Button2" runat="server" Text="Button 2" Flex="3" />
    
                    <ext:Container ID="Container21" runat="server" Flex="5" Layout="FitLayout"  >
                    <Content>
                    <uc1:TestGrid ID="TestGrid1" runat="server" />
                    </Content>
                    </ext:Container>
                <ext:Panel ID="Panel1" runat="server" Flex="1" Border="false" >
                            <Content>
                                Acme srl
                            </Content>
                        </ext:Panel>
    
                </Items>
            </ext:Panel>
                    </Items>
                </ext:Panel>
            </Content>
                </ext:Container>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 07, 2012 at 2:40 PM. Reason: Please use [CODE] tags for any code
  6. #6
    A Container has no body and, respectively, the BodyStyle property.

    Please try
    StyleSpec="background-color: transparent;"
    instead.

Similar Threads

  1. Replies: 0
    Last Post: May 01, 2012, 5:15 AM
  2. [CLOSED] [1.0] Listview with fixed width column
    By jchau in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 18, 2010, 4:53 PM
  3. Replies: 6
    Last Post: Jun 11, 2010, 1:47 PM
  4. [CLOSED] Set fixed size on viewport
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jul 07, 2009, 9:24 AM
  5. Replies: 1
    Last Post: Oct 13, 2008, 7:16 PM

Posting Permissions