[CLOSED] Ext.NET usage with Master pages

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] Ext.NET usage with Master pages

    I would like to factor the header portion of my page out into a master page, so I can reuse it on other pages. Currently, the header is just basic html and is sitting in a content section of a panel, which is part of the North region of a border layout. All of this sits in a viewport on the page.

    What I would like to do is put this header in the master page and have the content pages add the viewport and everything else. I guess what I'm asking is if it's possible to have content that can sit above a viewport on a page, or does everything have to be in the viewport?

    Am I going about this the wrong way? Is there another solution?
    Last edited by Daniil; Oct 01, 2010 at 3:32 PM. Reason: [CLOSED]
  2. #2
    Hi jmcantrell,

    Maybe something like this? But I'm note sure it would work in all cases.

    Example Master
    <%@ Master 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" ScriptMode="Debug" />
        <ext:Viewport runat="server" Layout="fit">
            <Items>
                <ext:Panel runat="server" Layout="border" Border="false">
                    <Items>
                        <ext:Panel runat="server" Region="Center">
                            <Content>
                                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
                            </Content>
                        </ext:Panel>
                        <ext:Panel runat="server" Height="200" Region="North">
                            <Content>
                                <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server" />
                            </Content>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
            <Listeners>
                <AfterRender Handler="  var header = Ext.DomHelper.createDom('Header');                                     
                                        this.getEl().insertFirst(header);" />
            </Listeners>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Example Child
    <%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <ext:FitLayout runat="server">
            <Items>
                <ext:Panel runat="server" Title="Center" Html="Center Panel" />
            </Items>
        </ext:FitLayout>
    </asp:Content>
    <asp:Content ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
        <ext:FitLayout runat="server">
            <Items>
                <ext:Panel runat="server" Title="North" Html="North Panel" />
            </Items>
        </ext:FitLayout>
    </asp:Content>
  3. #3
    Hi,

    ViewPort must be single top level element otherwise can be resize issues.
    I suggest to use ViewPort widget in the master page and define all predefined placeholders(header, footer, menu and etc)
    In content pages just override content placeholders
  4. #4

    Hi Vladimir,

    Quote Originally Posted by Vladimir View Post
    Hi,

    ViewPort must be single top level element otherwise can be resize issues.
    I suggest to use ViewPort widget in the master page and define all predefined placeholders(header, footer, menu and etc)
    In content pages just override content placeholders
    I am trying to add tabs dynamically from the masterpage.
    That is i have a menupanel in the master page and on each click of the menuitems the corresponding child pages should be opened in the new tabs.wouyld you help me in achieving this??i have tried a lot but it still doesnt work somehow.
  5. #5
    Hi @chippi,

    Please provide a simplified full test case.
  6. #6
    Quote Originally Posted by Daniil View Post
    Hi @chippi,

    Please provide a simplified full test case.
    Hi Daniil,

    Ok Let me explain.
    I have a masterpage with menupanel on the left and a header control and footer control.andon clicking the menu items, i want to open the child pages in different tabs.exactly same as the way we see in the ext.net examples page.
    For this i am creating a tabpanel inside the contentplaceholder in the master page and trying to open each page inside it in different tabs..but when i call the javascript function to open/add tabs on clicking menuitem the tabpanel isnt passed as a result it shows null..and hence i end up getting error.
    Will you please help me achieve this??
    i have been breaking my head on this for the past 2 weeks no but still no luck.
    here i am posting my masterpage code:
    ####################Masterpage File############################################## #############
    <body style="background-color:White">
        <form id="form1" runat="server">
        
       <%--  <asp:ContentPlaceHolder ID="CpHead" runat="server">--%>
        <div align="center">
                   <table style="height: 79px; width: 100%">
                    <tr>
                        <td align="center" bgcolor="EFF3FB" style=" color: Blue; font-size: x-large" 
                            class="style1">
                       Repton School</td>
                   </tr>
                 <%--  Text='<%# System.DateTime.Now.ToLongDateString()  %>'--%>
                   <tr><td align="right" bgcolor="CDDEF3"  style="color:Black"><asp:Label ID="lblTime" runat="server" ></asp:Label></td></tr>
                </table>
                  <table width="100%">
            <tr><td style="width: 82px" align="left" valign="top">
                <ext:ResourceManager ID="ResourceManager1" runat="server" />
             
           <ext:MenuPanel ID="MenuPanel1" runat="server" Height="670" Title="Menu" 
                            Width="185"  >
                            
                            <menu Layout="VBoxLayout">
                                <Items>
                                    <ext:MenuItem ID="mnuHome" runat="server" Text="Home" DirectClickUrl="~/Webpages/Home.aspx"  >
                                            <Listeners>
                                        <Click Handler="addTab(#{Mainpnl},'idHome', '~/Webpages/Home.aspx');" /> ///Here i am calling the JAvascript Function
                                    </Listeners>
                                 
                                    
                                    </ext:MenuItem>
                                    <ext:MenuItem ID="mnuInfo" runat="server" Text="My Info"  DirectClickUrl="~/Webpages/Grid.aspx"  />
                                    <ext:MenuItem ID="mnuNewsApprove" runat="server" Text="Approve News"  />
                                    <ext:MenuItem ID="mnuUserID" runat="server" Text="Create User ID" />
                                     <ext:MenuItem ID="mnuPupil" runat="server" Text="Pupil Info" />
                                      <ext:MenuItem ID="mnuLesson" runat="server" Text="Lesson Plan" />
                                       <ext:MenuItem ID="mnuReport" runat="server" Text="Report Card" />
                                        <ext:MenuItem ID="mnuAttendance" runat="server" Text="Attendance" />
                                         <ext:MenuItem ID="mnuLeaveApprove" runat="server" Text="Approve Leave" />
                                          <ext:MenuItem ID="mnuMonth" runat="server" Text="Month Attend" />
                                           <ext:MenuItem ID="mnuHomeWork" runat="server" Text="Home Work" />
                                            <ext:MenuItem ID="mnuEventCal" runat="server" Text="Event Calendar" />
                                             <ext:MenuItem ID="mnuECA" runat="server" Text="ECA Details" />
                                              <ext:MenuItem ID="mnuHealth" runat="server" Text="Health Report" />
                                               <ext:MenuItem ID="mnuArticleApprove" runat="server" Text="Approve Article" />
                                                <ext:MenuItem ID="mnuNews" runat="server" Text="News" />
                                                 <ext:MenuItem ID="mnuArticle" runat="server" Text="Articles" />
                                                  <ext:MenuItem ID="mnuTimeTable" runat="server" Text="TimeTable" />
                                                   <ext:MenuItem ID="mnuExam" runat="server" Text="Exam Schedule" />
                                                    <ext:MenuItem ID="mnuExamCurriculum" runat="server" Text="Exam Curriculum" />
                                                     <ext:MenuItem ID="mnuHoliday" runat="server" Text="Holiday List" />
                                                      <ext:MenuItem ID="mnuIncident" runat="server" Text="Incident Slip" />
                                                       <ext:MenuItem ID="mnuNotesonPupil" runat="server" Text="Notes On Pupil" />
                                                        <ext:MenuItem ID="mnuContact" runat="server" Text="Contact Us" />
                                                         <ext:MenuItem ID="mnuChangePasswd" runat="server" Text="Change Password" />
                                                          <ext:MenuItem ID="mnuLogout" runat="server" Text="Logout" />
                                </Items>
                            </menu>
                        </ext:MenuPanel>
            
                        </td>
         
            <td align="left" valign="top">
           
         
                <asp:ContentPlaceHolder ID="CpBody" runat="server">
                
                  <br />
         <ext:TabPanel ID="Mainpnl" runat="server" Border="true" > </ext:TabPanel> 
    
              
                
                </asp:ContentPlaceHolder>
          
                </td></tr>
               </table> </div>
        </form>
    </body>
    ##############adding tabs using the Javascript function ########################
    <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript" >
                var addTab = function (tabPanel, id, url) {
                    var tab = tabPanel.getComponent(id);
    
                    if (!tab) {
                        tab = tabPanel.add({
                            id: id,
                            title: url,
                            closable: true,
                            autoLoad: {
                                showMask: true,
                                url: url,
                                mode: "iframe",
                                maskMsg: "Loading " + url + "..."
                            }
                        });
    
                        tab.on("activate", function () {
                            var item = MenuPanel1.menu.items.get(id + "_item");
    
                            if (item) {
                                MenuPanel1.setSelection(item);
                            }
                        }, this);
                    }
    
                    tabPanel.setActiveTab(tab);
                }
    
                
            </script>
        </ext:XScript>
    </html>
    ################################################## ############################################
    Last edited by Daniil; Jul 15, 2013 at 5:26 AM. Reason: Please use [CODE] tags
  7. #7
    Please try to replace
    MenuPanel1
    with
    #{MenuPanel1}
    in the JavaScript code.
  8. #8
    Quote Originally Posted by Daniil View Post
    Please try to replace
    MenuPanel1
    with
    #{MenuPanel1}
    in the JavaScript code.
    Nooo..
    It doesnt execute till there..execution is stopped at: var tab = tabPanel.getComponent(id); here it gives error that getComponent is null or undefined..and if i break and check the tabpanel i.e the first parameter in the function is null..which means that it isnt getting passed in the function call..
  9. #9
    Please try to replace
    <Click Handler="addTab(#{Mainpnl},'idHome', '~/Webpages/Home.aspx');" />
    with
    <Click Handler="alert('#{Mainpnl}');" />
    What do you see in an alert box?
  10. #10
    Quote Originally Posted by Daniil View Post
    Please try to replace
    <Click Handler="addTab(#{Mainpnl},'idHome', '~/Webpages/Home.aspx');" />
    with
    <Click Handler="alert('#{Mainpnl}');" />
    What do you see in an alert box?


    i get alert as:Ext.get("Mainpnl")..
Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 11
    Last Post: Oct 25, 2012, 12:08 PM
  2. 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
  3. Master pages and cascade stylesheets (css)
    By Wtower in forum 1.x Help
    Replies: 4
    Last Post: Aug 01, 2009, 3:58 PM
  4. [CLOSED] AjaxMethods and Master Pages
    By davidhoyt in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Jan 15, 2009, 4:39 AM
  5. Master pages and layouts
    By davidhoyt in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 31, 2008, 7:14 AM

Posting Permissions