Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / examples / index.html
1 <html>
2 <head>
3     <title>Ext JS 3.2 Examples</title>
4
5     <style type="text/css">
6     #all-demos {
7
8     }
9     #all-demos dd {
10         float:left;
11         width:300px;
12         height:100px;
13         margin:5px 5px 5px 10px;
14         cursor:pointer;
15         zoom:1;
16     }
17     #all-demos dd img {
18         width:120px;
19         height:90px;
20         margin:5px 0 0 5px;
21         float:left;
22     }
23
24     #all-demos dd div {
25         float:left;
26         width:160px;
27         margin-left:10px;
28     }
29
30     #all-demos dd h4 {
31         font-family:tahoma,arial,san-serif;
32         color:#555;
33         font-size:11px;
34         font-weight:bold;
35     }
36     #all-demos dd p {
37         color:#777;
38     }
39     #all-demos dd.over {
40         background: #F5FDE3 url(shared/extjs/images/sample-over.gif) no-repeat;
41     }
42     #loading-mask{
43         position:absolute;
44         left:0;
45         top:0;
46         width:100%;
47         height:100%;
48         z-index:20000;
49         background-color:white;
50     }
51     #loading{
52         position:absolute;
53         left:45%;
54         top:40%;
55         padding:2px;
56         z-index:20001;
57         height:auto;
58     }
59     #loading a {
60         color:#225588;
61     }
62     #loading .loading-indicator{
63         background:white;
64         color:#444;
65         font:bold 13px tahoma,arial,helvetica;
66         padding:10px;
67         margin:0;
68         height:auto;
69     }
70     #loading-msg {
71         font: normal 10px arial,tahoma,sans-serif;
72     }
73
74     #all-demos .x-panel-body {
75         background-color:#fff;
76         border:1px solid;
77         border-color:#fafafa #fafafa #fafafa #fafafa;
78     }
79     #sample-ct {
80         border:1px solid;
81         border-color:#dadada #ebebeb #ebebeb #dadada;
82         padding:2px;
83     }
84
85     #all-demos h2 {
86         border-bottom: 2px solid #99bbe8;
87         cursor:pointer;
88         padding-top:6px;
89     }
90     #all-demos h2 div {
91         background:transparent url(../resources/images/default/grid/group-expand-sprite.gif) no-repeat 3px -47px;
92         padding:4px 4px 4px 17px;
93         color:#3764a0;
94         font:bold 11px tahoma, arial, helvetica, sans-serif;
95     }
96     #all-demos .collapsed h2 div {
97         background-position: 3px 3px;
98     }
99     #all-demos .collapsed dl {
100         display:none;
101     }
102     .x-window {
103         text-align:left;
104     }
105     #all-demos dd h4 span.new-sample{
106         color: red;
107     }
108
109     #all-demos dd h4 span.updated-sample{
110         color: blue;
111     }
112     </style>
113 </head>
114 <body>
115 <div id="loading-mask" style=""></div>
116 <div id="loading">
117     <div class="loading-indicator"><img src="shared/extjs/images/extanim32.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>Ext JS 3.2 - <a href="http://extjs.com">extjs.com</a><br /><span id="loading-msg">Loading styles and images...</span></div>
118 </div>
119
120 <div id="viewport">
121
122 <div id="hd">
123     <a href="/" id="logo"><img src="shared/extjs/logo02.png" alt="ExtJS.com - Ext JS" title="ExtJS.com - Ext JS - Home" border="0" height="52" width="134"></a>
124
125     <table cellspacing="0" class="nav main-nav">
126         <tr>
127         <td><a id="home-link" href="http://extjs.com/"><span>Home</span></a></td><td class="active"><a id="products-link" href="http://extjs.com/products"><span>Products</span></a></td><td><a id="support-link" href="http://extjs.com/support"><span>Support</span></a></td><td><a id="jobs-link" href="http://jobs.extjs.com"><span>Job Board</span></a></td><td><a id="company-link" href="http://extjs.com/company"><span>Company</span></a></td><td><a id="blog-link" href="http://extjs.com/blog"><span>Blog</span></a></td><td><a id="store-link" href="http://extjs.com/store"><span>Store</span></a></td>            </tr>
128     </table>
129
130
131     <table cellspacing="0" class="sub-nav">
132         <tr>
133         <td><a href="http://extjs.com/">Home</a></td><td class="spacer"><img src="shared/extjs/images/c-sep.gif"></td><td><a href="http://extjs.com/products">Products</a></td><td class="spacer"><img src="shared/extjs/images/c-sep.gif"></td><td><a href="http://extjs.com/products/extjs/">Ext JS</a></td><td class="spacer"><img src="shared/extjs/images/c-sep.gif"></td><td>3.2 Samples</td></tr>
134     </table>
135 </div>
136
137 <div id="bd">
138     <div class="left-column">
139         <h3>Ext JS 3.2 Samples</h3>
140         <br/>
141         <div id="sample-spacer" style="height:800px;"></div>
142
143         <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
144         <link rel="stylesheet" type="text/css" href="shared/extjs/css/extjs.css" />
145
146         <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
147         <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
148         <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
149         <script type="text/javascript" src="../ext-all.js"></script>
150         <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>
151
152         <!-- App.js contains Ext.App, a simple, re-usable Application component -->
153         <script type="text/javascript" src="shared/extjs/App.js"></script>
154         <script type="text/javascript" src="shared/extjs/site.js"></script>
155         <script type="text/javascript" src="data.js"></script>
156         <script type="text/javascript" src="init.js"></script>
157
158         <div id="all-demos">
159         </div>
160     </div>
161
162     <div class="right-column" style="padding-top:45px;">
163         <div class="side-box"><div class="side-box-inner">
164             <ul id="sample-menu" class="features"></ul>
165         </div></div>
166     </div>
167
168     <div style="clear:both"></div>
169 </div><!-- end bd -->
170
171 <div id="ft">
172     <table cellspacing="0" class="nav">
173         <tr>
174         <td><a id="home-foot-link" href="http://extjs.com/">Home</a></td><td class="active"><a id="products-foot-link" href="http://extjs.com/products">Products</a></td><td><a id="support-foot-link" href="http://extjs.com/support">Support</a></td><td><a id="jobs-foot-link" href="http://jobs.extjs.com">Job Board</a></td><td><a id="company-foot-link" href="http://extjs.com/company">Company</a></td><td><a id="blog-foot-link" href="http://extjs.com/blog">Blog</a></td><td><a id="store-foot-link" href="http://extjs.com/store">Store</a></td>            </tr>
175
176     </table>
177     <div class="copy">&copy; 2006-2010 Ext JS, Inc.</div>
178 </div>
179
180 </div><!-- end viewport -->
181
182 <div class="flyout-menu" id="products-menu" style="display:none;">
183     <div style="width:200px;">
184     <h3><a href="http://www.extjs.com/products/designer/">Ext Designer</a></h3>
185     <p>Desktop app for creating amazing web interfaces with drag and drop.</p>
186
187     <ul>
188         <li><a href="http://www.extjs.com/products/designer/">Overview</a></li>
189         <li><a href="http://www.extjs.com/products/designer/download.php">Download</a></li>
190         <li><a href="http://www.extjs.com/store/designer/">Purchase</a></li>
191     </ul>
192     <br/>
193     <h3><a href="http://extjs.com/products/extjs">Ext JS</a></h3>
194     <p>Cross-browser JavaScript library for building rich internet applications</p>
195
196     <ul>
197         <li><a href="http://extjs.com/products/extjs">Overview</a></li>
198         <li><a href="http://extjs.com/products/extjs/download.php">Download</a></li>
199         <li><a href="http://extjs.com/deploy/dev/examples/">Examples &amp; Demos</a></li>
200         <li><a href="http://extjs.com/deploy/dev/docs/">API Documentation</a></li>
201         <li><a href="http://extjs.com/products/extjs/commitlog.php">Public Commit Log</a></li>
202         <li><a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a></li>
203         <li><a href="http://extjs.com/store/extjs/">Purchase</a></li>
204     </ul>
205     <br/>
206     <h3><a href="http://extjs.com/products/gxt">Ext GWT</a></h3>
207     <p>Java library for building rich internet applications with GWT</p>
208     <ul>
209         <li><a href="http://extjs.com/products/gxt">Overview</a></li>
210
211         <li><a href="http://extjs.com/products/gxt/download.php">Download</a></li>
212         <li><a href="http://extjs.com/examples/" target="_blank">Samples &amp; Demos</a></li>
213         <li><a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a></li>
214         <li><a href="http://extjs.com/store/gxt/">Purchase</a></li>
215     </ul>
216     <br/>
217     <h3><a href="/products/extcore">Ext Core</a></h3>
218     <p>Cross-browser JavaScript library for enhancing web pages</p>
219     <ul>
220         <li><a href="http://extjs.com/products/extcore">Overview</a></li>
221         <li><a href="http://extjs.com/products/extcore/download.php">Download</a></li>
222         <li><a href="http://extjs.com/products/extcore/manual/">Manual</a></li>
223         <li><a href="http://extjs.com/products/extcore/docs/">API Documentation</a></li>
224     </ul>
225         <br/>
226         <h3><a href="http://extjs.com/products/jsbuilder/">JSBuilder</a></h3>
227         <p>Cross-platform Tool to Manage Building Ext Applications</p>
228         <ul>
229                 <li><a href="http://extjs.com/products/jsbuilder/">Download</a></li>
230         </ul>
231         </div>
232 </div>
233
234 <div class="flyout-menu" id="support-menu" style="display:none;">
235     <div style="width:200px;">
236
237     <h3><a href="http://extjs.com/support">Support Subscriptions</a></h3>
238     <p>With 1-on-1 email and phone support, we solve your Ext JS, GWT, CSS and JavaScript issues</p>
239     <ul>
240         <li><a href="http://extjs.com/store/extjs/#support-table">Ext JS Subscriptions</a></li>
241         <li><a href="http://extjs.com/store/gxt/#support-table">Ext GWT Subscriptions</a></li>
242     </ul>
243     <br/>
244
245     <h3><a href="http://extjs.com/support/training">Training</a></h3>
246     <p>Get up to speed quickly with on-site training provided by Ext</p>
247     <ul>
248         <li><a href="http://extjs.com/support/training/extjs/">Ext JS Training</a></li>
249         <li><a href="http://extjs.com/support/training/gxt/">Ext GWT Training</a></li>
250     </ul>
251     <br/>
252
253     <h3><a href="http://extjs.com/forum">Community</a></h3>
254     <p>The Ext community forums and wiki</p>
255     <ul>
256         <li><a href="http://extjs.com/forum">Forums</a></li>
257         <li><a href="http://extjs.com/learn">Learning Center</a></li>
258     </ul>
259     <br/>
260     <h3><a href="http://extjs.com/forum">Ext Solutions</a></h3>
261     <p>Enterprise consulting and custom development</p>
262     <ul>
263         <li><a href="http://extjs.com/support/services/">Find out more &raquo;</a></li>
264     </ul>
265     </div>
266
267 </div>
268
269 <div class="flyout-menu" id="store-menu" style="display:none;">
270     <div style="width:200px;">
271     <h3><a href="http://extjs.com/store/extjs/">Ext JS</a></h3>
272     <ul>
273         <li><a href="http://extjs.com/store/extjs/">Licenses</a></li>
274         <li><a href="http://extjs.com/store/extjs/#support-table">Support Subscriptions</a></li>
275     </ul>
276     <br/>
277     <h3><a href="http://extjs.com/store/gxt/">Ext GWT</a></h3>
278     <ul>
279         <li><a href="http://extjs.com/store/gxt/">Licenses</a></li>
280         <li><a href="http://extjs.com/store/gxt/#support-table">Support Subscriptions</a></li>
281     </ul>
282
283     <br/>
284     <h3><a href="http://extjs.com/store/faq.php">Help</a></h3>
285     <ul>
286         <li><a href="http://extjs.com/store/faq.php">Ordering FAQ</a></li>
287     </ul>
288     </div>
289 </div>
290
291 </body>
292 </html>