1 

    2 <%@ Page Language="C#" ClassName="ExtJsComplexLayoutDemo.aspx"   %>

    3 <%@ Import Namespace="mojoPortal.Web.Framework" %>

    4 <%@ Import Namespace="mojoPortal.Web.Controls" %>

    5 <%@ Import Namespace="mojoPortal.Web.Editor" %>

    6 

    7 <script runat="server">

    8     /// <summary>

    9     /// Author:                    Joe Audette

   10     /// Created:                2007-11-3

   11     /// Last Modified:            2007-11-3

   12     ///

   13     /// </summary>

   14 

   15 

   16     protected void Page_Load(object sender, EventArgs e)

   17     {

   18 

   19 

   20     }

   21 

   22 

   23 </script>

   24 

   25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   26 

   27 <html xmlns="http://www.w3.org/1999/xhtml" >

   28 <head id="Head1" runat="server">

   29     <title>ExtJs Complex Layout Demo using mojoPortal.Web.Controls.ExtJs</title>

   30     <style type="text/css">

   31         html, body {

   32            font:normal 12px verdana;

   33             margin:0;padding:0;border:0 none;overflow:hidden;height:100%;

   34         }

   35         p.padded {margin:5px 5px 5px 5px; padding:10px 10px 10px 10px;

   36         }

   37         .nav {background-image:url(../Data/SiteImages/FeatureIcons/email.png);}

   38 

   39     </style>

   40 </head>

   41 <body>

   42     <form id="form1" runat="server">

   43     <portal:CSSIncludeExtJs id="ExtCss" runat="server"></portal:CSSIncludeExtJs>

   44     <ext:ViewPort id="vpMain" runat="server">

   45 

   46     <ext:SplitPanel ID="pnlTop" runat="server"

   47         FixedPixelHeight="100"

   48         MinSize="100"

   49         MaxSize="250"

   50         Title="Top Panel"

   51         Region="north"

   52         Split="true"

   53         Collapsible="true"

   54         >

   55 

   56     <p class="padded">

   57     This is the top something goes here like toolbars</p>

   58 

   59     </ext:SplitPanel>

   60 

   61     <ext:SplitPanel ID="pnlRight" runat="server"

   62         Title="Right Side"

   63         Region="east"

   64         Split="true"

   65         FixedPixelWidth="225"

   66         MinSize="175"

   67         MaxSize="400"

   68         Collapsible="true"

   69         Layout="fit"

   70         >

   71 

   72         <p class="padded">

   73         This is Right side.

   74         </p>

   75 

   76     </ext:SplitPanel>

   77 

   78     <ext:SplitPanel ID="pnlLeft" runat="server"

   79         Title="Left Side"

   80         Region="west"

   81         Split="true"

   82         FixedPixelWidth="200"

   83         MinSize="175"

   84         MaxSize="400"

   85         Collapsible="true"

   86         Layout="accordion"

   87         AnimateLayout="true"

   88         >

   89 

   90         <ext:ExtPanel ID="navExternalMail" runat="server"  Title="External Mail" IconCls="nav">

   91 

   92         <p class="padded">External Mail</p>

   93 

   94         </ext:ExtPanel>

   95 

   96         <ext:ExtPanel ID="navSiteMail" runat="server"  Title="Site Mail" IconCls="nav">

   97 

   98         <p class="padded">Site Mail</p>

   99 

  100         </ext:ExtPanel>

  101 

  102         <ext:ExtPanel ID="navMyStuff" runat="server"  Title="My Stuff" IconCls="nav">

  103 

  104         <p class="padded">My stuff goes here</p>

  105 

  106         </ext:ExtPanel>

  107 

  108     </ext:SplitPanel>

  109 

  110     <ext:TabPanel ID="tpCenter" runat="server"

  111         Title="TabPanel1" Region="center"

  112         SelectedTabID="tab1"

  113         AutoHeight="false"

  114         AutoWidth="false"

  115         CssClass="">

  116 

  117     <ext:Tab ID="tab1" runat="server" Title="Tab 1" AutoScroll="true" CssClass="modulecontent">

  118 

  119     <p class="padded">

  120     This is a demo page using mojoPortal .NET Server controls to wrap the ExtJs javasvript toolkit. ExtJs Complex Layout Demo.

  121 

  122     </p>

  123     <p class="padded">

  124     <a href='ExtJsComplexLayoutDemo.aspx.source.html'>View the Source Code of This page to see what the server control markup looks like.</a>

  125     </p>

  126 

  127     <p class="padded">

  128     This example is based on the <a href='http://extjs.com/deploy/dev/examples/layout/complex.html' title='ExtJs Complex Layout Example'>ExtJs Complex Layout Example</a>.

  129     </p>

  130 

  131     <p class="padded">

  132     Notice how you can collapse each of the panels to get them out of the way.

  133     If you mouse over the borders you'll see that you can also resize the panels by dragging the borders.

  134 

  135     </p>

  136 

  137     </ext:Tab>

  138 

  139     <ext:Tab ID="tab2" runat="server" Title="Tab 2" AutoScroll="true" CssClass="modulecontent">

  140 

  141     <p class="padded">

  142     Tabs can be used in any of the layout panes.

  143     </p>

  144     </ext:Tab>

  145 

  146     <ext:Tab ID="tab3" runat="server" Title="Tab 3" AutoScroll="true" CssClass="modulecontent" Closable="true">

  147 

  148     <p class="padded">

  149     Tabs can be closable too.

  150     </p>

  151 

  152     </ext:Tab>

  153 

  154 

  155     </ext:TabPanel>

  156 

  157     <ext:SplitPanel ID="pnlBottom" runat="server"

  158         FixedPixelHeight="100"

  159         MinSize="100"

  160         MaxSize="400"

  161         Title="Bottom Panel"

  162         Region="south" 

  163         Collapsible="true"

  164         Split="true"

  165         >

  166 

  167         <p class="padded">

  168     This is the bottom, maybe status notifications can go here.

  169     </p>

  170 

  171     </ext:SplitPanel>

  172 

  173     </ext:ViewPort>

  174 

  175     </form>

  176 </body>

  177 </html>

  178 

  179 

  180 

  181