[CLOSED] Page Layout

  1. #1

    [CLOSED] Page Layout

    I'm trying to split the center area in 2 somehow, giving me a layout that looks like 4 different areas (hopefully collapsable), I can't seem to find anything that works. Any suggestions?



    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    
    
    <script runat="server">
        
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
    
        protected void DetailsTabsChanged(object sender, EventArgs e)
        {
    
        }
    
    </script>
    
    <!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 id="Head1" runat="server">
        <title></title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
          <style type="text/css">
            .west-panel .x-layout-collapsed-west{
                background: url(collapsed-west.png) no-repeat center;
            }
    
        </style>
    </head>
    <body>
        <form id="formPRD" runat="server">
        
        <ext:Panel ID="pnlds" runat="server" EnableViewState="true">
            <Content>
                <div>
                    <ext:ResourceManager ID="resManagerPRD" runat="server"
                        EnableViewState="true"
                        ShowWarningOnAjaxFailure="false" />
                    <ext:Viewport ID="viewportPRD" runat="server" EnableViewState="true">
                        <Items>
                            <ext:BorderLayout ID="BorderLayoutPRD" runat="server">
                                <North Collapsible="true" MarginsSummary="0 5 5 5">
                                    <ext:TabPanel ID="tbpnlDetails" runat="server" Frame="true" Height="200" AutoScroll="true">
                                        <DirectEvents>
                                            <TabChange OnEvent="DetailsTabsChanged">
                                            </TabChange>
                                        </DirectEvents>
                                        <Items>
                                            <ext:Panel ID="pnlFSRHistory" runat="server" Title="1" Layout="Fit" AutoScroll="true">
                                                <Content>
                                                 
                                                </Content>
                                            </ext:Panel>
                                            <ext:FormPanel ID="frmPanelComments" runat="server" Title="2" AutoScroll="true">
                                                <Content>
                                                    <div>
                                                        <ext:Panel ID="pnlAddComment" runat="server" Height="60" Hidden="true">
                                                            <Content>
                                                                <table border="0" cellspacing="5" width="900">
                                                                 
                                                                </table>
                                                            </Content>
                                                        </ext:Panel>
                                                    </div>
                                                   
                                                </Content>
                                            </ext:FormPanel>
                                            <ext:Panel ID="pnlEmails" runat="server" Title="3" Layout="Fit" AutoScroll="true">
                                                <Content>
              
                                                </Content>
                                            </ext:Panel>
                                        </Items>
                                        <Listeners>
                                            <Expand Handler="" />
                                        </Listeners>
                                    </ext:TabPanel>
                                </North>
                                <Center Collapsible="false" MarginsSummary="0 5 0 5" Split="true">
                                    <ext:TabPanel ID="TabPanel1" runat="server" Frame="true" Height="200" AutoScroll="true">
                                        <DirectEvents>
                                            <TabChange OnEvent="DetailsTabsChanged">
                                            </TabChange>
                                        </DirectEvents>
                                    </ext:TabPanel>
                                </Center>
                                <West Collapsible="true" MinWidth="175" Split="true">
                                    <ext:Panel ID="Panel1" 
                                        runat="server"                             
                                        Width="175" 
                                        CtCls="west-panel"
                                        Title="Navigation" 
                                        Collapsed="false"
                                        Padding="5"
                                        Html="Machos"
                                        />
                                </West>
                            </ext:BorderLayout>
                        </Items>
                    </ext:Viewport>
    
                    
                </div>
            </Content>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; May 17, 2011 at 1:52 PM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi,

    1. ViewPort cannot be nested inside another control
    2. Please provide mockup image with required layout
  3. #3

    Page Layout

    Here's a mockup
    Attached Thumbnails Click image for larger version. 

Name:	Untitled.jpg 
Views:	50 
Size:	48.9 KB 
ID:	2693  
  4. #4
    Hi,

    Please see the sample.

    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:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Title="North 1" 
                    Region="North" 
                    Height="150" 
                    Collapsible="true" />
                <ext:Panel 
                    runat="server" 
                    Title="West" 
                    Region="West" 
                    Width="150" 
                    Collapsible="true" />
                <ext:Panel 
                    runat="server" 
                    Title="Center 1" 
                    Region="Center" 
                    Layout="BorderLayout" 
                    Collapsible="true">
                    <Items>
                        <ext:Panel 
                            runat="server" 
                            Title="North 2" 
                            Region="North" 
                            Height="150" 
                            Collapsible="true" />
                        <ext:Panel 
                            runat="server" 
                            Title="Center 2" 
                            Region="Center" 
                            Collapsible="true" />
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] layout issue when using RowLayout within column layout
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 11, 2012, 2:40 PM
  2. [CLOSED] Page layout in IFrame and resize issue
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 25, 2011, 8:35 AM
  3. [CLOSED] Page Header Footer layout design concepts with ExtJs/Ext.NET
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 13, 2011, 5:00 PM
  4. [CLOSED] Page layout using layout controls.
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 23, 2010, 12:08 PM
  5. Row and Colum Layout in same page
    By Sameera in forum 1.x Help
    Replies: 2
    Last Post: Jan 13, 2010, 1:27 PM

Posting Permissions