What's New?

[CLOSED] How can I do this RowLayout with centered rows

  1. #1
    Sep 15, 2010, 6:46 PM

    [CLOSED] How can I do this RowLayout with centered rows

    I'm trying to get the following layout. I tried looking at the examples for centerlayout, but I could never get anything centered. How can I do this?

    +---------RowLayout----------+
|                            |
|      [centered image]      |
|                            |
+----------------------------+
|                            |
|         Some text          |
|          that is           |
|         centered.          |
|                            |
+----------------------------+
    Last edited by Daniil; Sep 24, 2010 at 8:03 AM. Reason: [CLOSED]
  2. #2
    Sep 15, 2010, 7:32 PM
    Hi,

    There appears to be an issue with the Center Layout if only the <Content> region is configured.

    Example

    <ext:Panel 
    ID="Panel1" 
    runat="server" 
    Title="Example" 
    Width="350" 
    Height="215" 
    Layout="center">
    <Content>
        Center Text
    </Content>
</ext:Panel>
    We're looking into a fix. Thanks for reporting the problem.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Sep 15, 2010, 7:36 PM
    A "centered" layout can also be configured using the hbox Layout.

    Example

    <ext:Panel 
    ID="Panel1" 
    runat="server" 
    Title="Example" 
    Width="350" 
    Height="215" 
    Layout="hbox">
    <Items>
        <ext:Container runat="server" Flex="1" />
        <ext:Container runat="server">
            <Content>
                Center Text
            </Content>
        </ext:Container>
        <ext:Container runat="server" Flex="1" />
    </Items>
</ext:Panel>
    The flanking <ext:Container>'s require the Flex="1" property set.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Sep 15, 2010, 9:37 PM
    Quote Originally Posted by geoffrey.mcgill View Post
    A "centered" layout can also be configured using the hbox Layout.

    Example

    <ext:Panel 
    ID="Panel1" 
    runat="server" 
    Title="Example" 
    Width="350" 
    Height="215" 
    Layout="hbox">
    <Items>
        <ext:Container runat="server" Flex="1" />
        <ext:Container runat="server">
            <Content>
                Center Text
            </Content>
        </ext:Container>
        <ext:Container runat="server" Flex="1" />
    </Items>
</ext:Panel>
    The flanking <ext:Container>'s require the Flex="1" property set.
    Are you saying that I should use this until whatever is causing the problem with the Layout="center" is fixed?
  5. #5
    Sep 16, 2010, 10:26 AM
    Hello, jmcantrell!

    It's rather the alternative way.

    Also to centralize you could use the vbox layout.

    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 xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel runat="server" Layout="row">
        <Items>
            <ext:Panel 
                runat="server" 
                Title="Image" 
                Width="350" 
                Height="215" 
                RowHeight=".5"
                Layout="vbox">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Pack="Center" Align="Center" />
                </LayoutConfig>
                <Items>
                    <ext:DisplayField runat="server" Text="Image" />
                </Items>
            </ext:Panel>
            <ext:Panel 
                runat="server" 
                Title="Image" 
                Width="350" 
                Height="215" 
                RowHeight=".5"
                Layout="vbox">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Pack="Center" Align="Center" />
                </LayoutConfig>
                <Items>
                    <ext:DisplayField runat="server" Text="Text" />
                </Items>
            </ext:Panel>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
  6. #6
    Sep 16, 2010, 7:54 PM
    Here's another variation on the theme...

    Example

    <ext:Panel 
    runat="server" 
    Title="Example" 
    Height="400" 
    Width="400" 
    Layout="vbox">
    <LayoutConfig>
        <ext:VBoxLayoutConfig Align="Center" />
    </LayoutConfig>
    <Items>
        <ext:Container runat="server" Flex="1">
            <Content>
                [centered image]
            </Content>
        </ext:Container>
        <ext:Container runat="server" Flex="1">
            <Content>
                Some text<br />
                that is<br />
                centered
            </Content>
        </ext:Container>
    </Items>
</ext:Panel>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Sep 16, 2010, 7:57 PM
    A new ticket has been created for this Layout="center" defect, see

    http://extnet.lighthouseapp.com/proj...-with-no-items
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  8. #8
    Sep 23, 2010, 6:19 PM
    The defect where Center Layout was causing a JavaScript error if no <Items> were configured has been fixed.

    The fix has been committed to SVN (#3109) and will be publicly available with the upcoming v1.0 Beta release.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [CLOSED] RowLayout Not Rendering Correctly When Some Rows Are Not Visible
    By logicspeak in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 10, 2012, 9:10 PM
  2. [CLOSED] Height of a panel inside RowLayout does not apply when the RowLayout is inside a TabPanel
    By anup in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Feb 01, 2011, 11:00 AM
  3. Master Page, Centered Viewport
    By dankohler in forum Examples and Extras
    Replies: 1
    Last Post: Dec 22, 2009, 9:05 AM
  4. [CLOSED] IFrame mask not centered
    By CSG in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 20, 2009, 6:04 PM
  5. [CLOSED] Rows in RowLayout seem to be cut off in IE 7
    By bfolger in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Sep 12, 2009, 1:16 PM

Posting Permissions