What's New?

[CLOSED] ViewPort and fixed body width

  1. #1
    Aug 06, 2012, 9:43 AM

    [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 5:00 PM. Reason: [CLOSED]
  2. #2
    Aug 06, 2012, 10:24 AM
    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
    Aug 06, 2012, 1:33 PM
    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
    Aug 06, 2012, 3:04 PM
    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
    Aug 07, 2012, 1:13 PM
    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 1:40 PM. Reason: Please use [CODE] tags for any code
  6. #6
    Aug 07, 2012, 1:42 PM
    A Container has no body and, respectively, the BodyStyle property.

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

Similar Threads

  1. how to set width and height of Viewport in ext.Net
    By archana in forum 1.x Help
    Replies: 0
    Last Post: May 01, 2012, 4: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, 3:53 PM
  3. [FIXED] Editable GridPanel textfield editor width does not fit column width
    By jchau in forum Bugs
    Replies: 6
    Last Post: Jun 11, 2010, 12: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, 8:24 AM
  5. [FIXED] [V0.7] RowExpander in ViewPort Bug
    By Timothy in forum Bugs
    Replies: 1
    Last Post: Oct 13, 2008, 6:16 PM

Posting Permissions