Layout Design using Master page

  1. #1

    Layout Design using Master page

    HI Team,
    Please see the following code
    ===============
    Master page code
    ===============
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="LayoutDemo.master.cs"
        Inherits="MasterLayout.LayoutDemo" %>
    
    <%@ Register Namespace="Ext.Net" Assembly="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>
        <script type="text/javascript">
            var addTab = function (tabPanel, id, url, menuItem, title) {
                
                var tab = tabPanel.getComponent(id);
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: title,
                        closable: true,
                        menuItem: menuItem,
                        loader: {
                            url: url,
                            renderer: "frame",
                            loadMask: {
                                showMask: true,
                                msg: "Loading " + url + "..."
                            }
                        }
                    });
    
                }
    
                tabPanel.setActiveTab(tab);
            }
        </script>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="resourceManager" runat="server">
            </ext:ResourceManager>
            <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" IDMode="Explicit"
                IsDynamic="False" Namespace="App" RenderXType="True">
                <Items>
                    <ext:Panel ID="pnlWest" Region="West" Width="200" Collapsible="true" runat="server"
                        Title="MenuPanel">
                        <Items>
                            <ext:MenuPanel ID="mnuPanel" runat="server" Title="MenuPanel">
                                <Menu runat="server" ID="adminMenu">
                                    <Items>
                                        <ext:MenuItem ID="miViewResults" runat="server" Text="View Result">
                                            <Listeners>
                                                <Click Handler="addTab(#{TabPanel1},'idmiViewResults','Result.aspx',this,'Results')">
                                                </Click>
                                            </Listeners>
                                        </ext:MenuItem>
                                    </Items>
                                </Menu>
                            </ext:MenuPanel>
                        </Items>
                    </ext:Panel>
                    <ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
                        <Items>
                            <ext:Panel runat="server" Title="Sample" ID="panelHome">
                                <Items>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Viewport>
            <asp:ContentPlaceHolder ID="CPH" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>
    =========================
    Home Page code to view in browser
    =========================
    <%@ Page Title="" Language="C#" MasterPageFile="~/LayoutDemo.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="MasterLayout.Home" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="CPH" runat="server">
    </asp:Content>

    =======================
    Result page Code
    =======================

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Result.aspx.cs" Inherits="MasterLayout.Result" %>
    
    <%@ Register Namespace="Ext.Net" Assembly="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 ID="ResourceManager1" runat="server" />
        <ext:FormPanel ID="fpResults" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="pnlEast" runat="server" Width="300" Region="East" Collapsible="true">
                    <Content>
                        <table>
                            <tr>
                                <td>
                                    List of records in gridpanel
                                </td>
                            </tr>
                        </table>
                    </Content>
                </ext:Panel>
                <ext:Panel ID="pnlCenter" runat="server" Region="Center" >
                    <Content>
                        <table>
                            <tr>
                                <td>
                                    Data to save
                                </td>
                            </tr>
                        </table>
                    </Content>
                </ext:Panel>
            </Items>
        </ext:FormPanel>
        </form>
    </body>
    </html>
    ==============================

    When I clicked on menuItem then the Result.aspx page is added to the tabpanel.
    In Result.aspx I have used Formpanel with border layout and defined two regions.
    Here my question is I am unable to view the design properly
    I don't want to use height property to controls(Height=600 for formpanel)
    I want to use layout's to fit the design to all the browsers.
    Any solution is helpful

    Thanks
    Nagamalli
  2. #2
    Hi @nagamalli,

    Please try to add layout: "fit":
    tab = tabPanel.add({
        id: id,
        title: title,
        closable: true,
        menuItem: menuItem,
        layout: "fit",
        loader: {
            url: url,
            renderer: "frame",
            loadMask: {
                showMask: true,
                msg: "Loading " + url + "..."
            }
        }
    });
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @nagamalli,

    Please try to add layout: "fit":
    tab = tabPanel.add({
        id: id,
        title: title,
        closable: true,
        menuItem: menuItem,
        layout: "fit",
        loader: {
            url: url,
            renderer: "frame",
            loadMask: {
                showMask: true,
                msg: "Loading " + url + "..."
            }
        }
    });
    Hi Daniil,
    Thanks for reply,
    I tried given solution but it is not working

    Thanks
    nagamalli
  4. #4
    Yes, my suggestion was wrong.

    Please wrap the FormPanel in:
    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:FormPanel ID="fpResults" runat="server" Layout="BorderLayout" Height="600">
                ...
            </ext:FormPanel>
        </Items>
    </ext:Viewport>
  5. #5
    Quote Originally Posted by Daniil View Post
    Yes, my suggestion was wrong.

    Please wrap the FormPanel in:
    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:FormPanel ID="fpResults" runat="server" Layout="BorderLayout" Height="600">
                ...
            </ext:FormPanel>
        </Items>
    </ext:Viewport>
    Hi,
    Thanks for the solution, It worked.
    I have little ambiguity of using Viewport, Because we have already used it in Master page.
    Could you tell me the advantages of using Viewport?

    nagamalli.
  6. #6
    A Viewport takes all the available space on the screen. And you are right, there must a single Viewport on the page. However, you are loading another page in an iframe. It is self-contained enough to use a Viewport there.
  7. #7
    Hi Daniil,
    Thanks for the solution
    Mark it as closed.

    nagamalli

Similar Threads

  1. Replies: 1
    Last Post: Jul 15, 2013, 1:35 PM
  2. Replies: 4
    Last Post: Feb 25, 2013, 9:23 AM
  3. can we set master pages in ext .net design
    By vbmathew in forum 2.x Help
    Replies: 3
    Last Post: Oct 25, 2012, 10:40 AM
  4. [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
  5. Replies: 2
    Last Post: May 05, 2010, 10:23 AM

Tags for this Thread

Posting Permissions