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