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