[CLOSED] Masterpage FitLayout

  1. #1

    [CLOSED] Masterpage FitLayout

    Hi guys

    I have a MasterPage containing a header for navigation and a ContentPlaceHolder. I want to be able to fit the layout of the child pages (e.g. a GridPanel) into the ContentPlaceHolder. However, I only want to do this on some of the child pages. On the rest I want the usual flow of layout.


    Can you suggest how I might go about doing this, preferably using 0.8.2, but if not, using v1?


    Thanks
    Neil.
  2. #2

    RE: [CLOSED] Masterpage FitLayout

    Hi,

    Please see the following sample

    Master page
    <%@ Master Language="C#" AutoEventWireup="true" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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" lang="en" xml:lang="en">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager2" runat="server" >
            </ext:ScriptManager>
            
            <ext:ViewPort runat="server">
                <Body>
                    <ext:BorderLayout runat="server">
                        <North>
                            <ext:Panel runat="server" Height="100">
                                <Body>
                                    <asp:ContentPlaceHolder ID="NorthRegion" runat="server"></asp:ContentPlaceHolder>
                                </Body>
                            </ext:Panel>
                        </North>
                        
                        <Center>
                            <ext:Panel runat="server">
                                <Body>
                                    <asp:ContentPlaceHolder ID="CenterRegion" runat="server"></asp:ContentPlaceHolder>
                                </Body>
                            </ext:Panel>
                        </Center>
                    </ext:BorderLayout>
                </Body>
            </ext:ViewPort>
        </form>
    </body>
    </html>
    Content page
    <%@ Page Language="C#" MasterPageFile="~/Temp/AjaxEvents/Test.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Coolite.Sandbox.Temp.AjaxEvents.WebForm1" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="NorthRegion" runat="server">
        <ext:FitLayout runat="server">
            <ext:Panel runat="server" Title="I am in the North region"></ext:Panel>
        </ext:FitLayout>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="CenterRegion" runat="server">
        <ext:FitLayout runat="server">
            <ext:Panel runat="server" Title="I am in the Center region"></ext:Panel>
        </ext:FitLayout>
    </asp:Content>
  3. #3

    RE: [CLOSED] Masterpage FitLayout

    Hi Vlad

    Thanks for your reply.

    What I want to do is to have another child page that inherits from the MasterPage, but to be able to configure it so that it has normal page layout i.e. if the content is too long, the page will scroll.

    Any suggestions?

    Neil.
  4. #4

    RE: [CLOSED] Masterpage FitLayout

    Hi,

    I am not sure that clear understood you. Can you demonstrate some mockup code?
  5. #5

    RE: [CLOSED] Masterpage FitLayout



    Okay Vlad, here goes

    Master page

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server">
            </ext:ScriptManager>
            <ext:Panel runat="server" Title="Navigation panel" Height="100">
            </ext:Panel>
            
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            
    
        </form>
    </body>
    </html>
    Page with normal layout. The page scrolls when the content is too long. This works fine.

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="NormalLayout.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <ext:Panel runat="server" Title="Normal page content" Height="1000">
    </ext:Panel>
    </asp:Content>
    FitLayout page. I want the grid in this page to fill the rest of the page.

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
        CodeFile="FitLayout.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
    
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    
    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Ext.IsAjaxRequest)
                {
                    this.Store1.DataSource = new object[]
                    {
                        new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"},
                        new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"},
                        new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"},
                        new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"},
                        new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"},
                        new object[] {"AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"},
                        new object[] {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"},
                        new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"},
                        new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"},
                        new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"},
                        new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"},
                        new object[] {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"},
                        new object[] {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"},
                        new object[] {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"},
                        new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"},
                        new object[] {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"},
                        new object[] {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"},
                        new object[] {"Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"},
                        new object[] {"JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am"},
                        new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am"},
                        new object[] {"Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"},
                        new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"},
                        new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"},
                        new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"},
                        new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"},
                        new object[] {"The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"},
                        new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"},
                        new object[] {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"},
                        new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}
                    };
    
    
                    this.Store1.DataBind();
                }
            }
        </script>
        
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="company" />
                        <ext:RecordField Name="price" Type="Float" />
                        <ext:RecordField Name="change" Type="Float" />
                        <ext:RecordField Name="pctChange" Type="Float" />
                        <ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
    
    
    
        <ext:Panel runat="server">
            <Body>
                <ext:FitLayout runat="server">
                    <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
                        Title="Array Grid" TrackMouseOver="true" Width="600" AutoExpandColumn="Company">
                        <columnmodel runat="server">
                            <Columns>
                                <ext:Column ColumnID="Company" Header="Company" Sortable="true" DataIndex="company" />
                                <ext:Column Header="Price" Sortable="true" DataIndex="price"/>
                                <ext:Column Header="Change" Sortable="true" DataIndex="change"/>
                                <ext:Column Header="Change" Sortable="true" DataIndex="pctChange"/>
                                <ext:Column Header="Last Updated" Sortable="true" DataIndex="lastChange"/>
                            </Columns>
                        </columnmodel>
                    </ext:GridPanel>
                </ext:FitLayout>
            </Body>
        </ext:Panel>
    </asp:Content>
    Thanks
    Neil.
  6. #6

    RE: [CLOSED] Masterpage FitLayout

    Hi,

    I think you have to use another master page to fit the grid because you need to use ViewPort to occupies whole browser page. ViewPort cannot be use with another top level controls because ViewPort must be single top level control.

    So, creates new master page with ViewPort and BorderLayout. Define north region as required and place Panel with ContentPlaceholder inside center region

    Why do you want to combine those different cases with one master page? To have several master pages is absolutely normal
  7. #7

    RE: [CLOSED] Masterpage FitLayout



    Hi Vlad

    Thanks. Didn't want to use multiple master pages if it wasn't necessary.

    Thanks for your input.

    Neil.

Similar Threads

  1. [CLOSED] Masterpage and BorderLayout
    By Justin_Wignall in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 11, 2011, 11:36 AM
  2. [CLOSED] Ext. Control with MasterPage
    By sisa in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 08, 2011, 4:15 PM
  3. Masterpage ViewPort FitLayout
    By w0rtez in forum 1.x Help
    Replies: 0
    Last Post: Sep 28, 2010, 3:30 PM
  4. Implementation of MasterPage
    By thchuong in forum 1.x Help
    Replies: 0
    Last Post: Apr 20, 2010, 12:14 AM
  5. Masterpage Combobox
    By afhi in forum 1.x Help
    Replies: 1
    Last Post: May 18, 2009, 1:58 PM

Posting Permissions