What's New?

TableLayout

  1. #1
    Mar 19, 2010, 9:20 AM

    TableLayout

    Is it possible to use two different table layouts in a page? (two tablelayout controls)
    I have tried various different styles. But it was never possible. It is due to a design i have.
  2. #2
    Mar 19, 2010, 12:03 PM

    RE: TableLayout

    Hi,

    It is possible to use two Table layouts on the same Page, but not two directly inside the same Container.


    Can you post a screen capture or mockup of the layout you require? We might be able to offer some alternative suggestions.


    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
    Mar 19, 2010, 1:12 PM

    RE: TableLayout

    Hi,

    Thanks for the reply. I have just attached the screen capture. I can not obtain this design. It is all normal to "Date Information". But i can not obtain the space between "Date Information" and "Navigate Object" as in this jpeg. These two are not aligned like this, there occurs a wide space between them. Can you help?

    Thanks indeed

  4. #4
    Mar 19, 2010, 3:23 PM

    RE: TableLayout

    Hi,

    Here's a sample which demonstrates one technique. I've built using the new v1.0 (to be released soon) since it includes the new HBoxLayout and many new syntax optimizations. You should be able to configure approx the same layout using the ColumnLayout.

    Example

    <%@ Page Language="C#" AutoEventWireup="true" %>

<%@ 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:Viewport runat="server" Layout="fit">
            <Items>
                <ext:TabPanel runat="server">
                    <Items>
                        <ext:Panel runat="server" Title="Project" Padding="5">
                            <Items>
                                <ext:Container runat="server" Layout="hbox" StyleSpec="margin-bottom:5px;">
                                    <Items>
                                        <ext:FormPanel 
                                            runat="server" 
                                            Title="Information" 
                                            Height="300" 
                                            Collapsible="true" 
                                            Flex="2" 
                                            Padding="5"
                                            StyleSpec="padding-right:5px;">
                                            <Items>
                                                <ext:DisplayField runat="server" FieldLabel="Name" Text="--/--" />
                                                <ext:TextField runat="server" FieldLabel="Description" Text="OH Acasa studentenhuisvesting" />
                                            </Items>
                                        </ext:FormPanel>
                                        <ext:Container runat="server" Flex="1" DefaultCollapsible="true" AutoHeight="true">
                                            <Items>
                                                <ext:Panel runat="server" Title="Actions" Height="100" StyleSpec="margin-bottom:5px;" />
                                                <ext:Panel runat="server" Title="History" Height="100" StyleSpec="margin-bottom:5px;" />
                                                <ext:Panel runat="server" Title="Project Hours Status" Height="100" StyleSpec="margin-bottom:5px;" />
                                                <ext:Panel runat="server" Title="Kwaliteits Formulieren" Height="100" />
                                            </Items>
                                        </ext:Container>
                                    </Items>
                                </ext:Container>
                                <ext:Container runat="server" Layout="hbox">
                                    <Items>
                                        <ext:Container runat="server" Flex="1" StyleSpec="padding-right:5px;">
                                            <Items>
                                                <ext:Panel runat="server" Title="Date Information" Height="100" Collapsible="true" StyleSpec="margin-bottom:5px;" />
                                                <ext:Panel runat="server" Title="Invoicing" Height="100" Collapsible="true" />
                                            </Items>
                                        </ext:Container>
                                        <ext:Panel runat="server" Title="Navigate Project" Height="400" Collapsible="true" Flex="2" />
                                    </Items>
                                </ext:Container>
                            </Items>
                        </ext:Panel>
                        <ext:Panel runat="server" Title="Calculations" />
                        <ext:Panel runat="server" Title="BOM" />
                        <ext:Panel runat="server" Title="Purchase" />
                        <ext:Panel runat="server" Title="Activities" />
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    
    </form>
</body>
</html>
    I'll take a screen capture of what the above renders and post.

    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
  5. #5
    Mar 19, 2010, 3:32 PM

    RE: TableLayout

    Here's the screen capture, see http://i.imgur.com/QjUuh.jpg

    Hope this helps.


    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. IE7 TableLayout BUG
    By qch2006qch in forum 1.x Help
    Replies: 2
    Last Post: Feb 14, 2012, 3:27 AM
  2. AutoWidth in TableLayout
    By lagrange in forum 1.x Help
    Replies: 0
    Last Post: Sep 27, 2011, 2:47 AM
  3. Tablelayout & colspan- best practices
    By springrider in forum 1.x Help
    Replies: 0
    Last Post: Aug 18, 2011, 10:35 PM
  4. TableLayout questions
    By haltenberg in forum 1.x Help
    Replies: 2
    Last Post: Nov 04, 2008, 5:32 PM
  5. Nested TableLayout
    By riccardosarti in forum 1.x Help
    Replies: 3
    Last Post: Sep 25, 2008, 9:57 AM

Posting Permissions