make sure the README will appear on github
[extjs.git] / examples / samples.html
1 <html>\r
2 <head>\r
3         <title>Ext JS 2.2.1 Samples</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     </style>\r
106 </head>\r
107 <body>\r
108 <div id="loading-mask" style=""></div>\r
109 <div id="loading">\r
110     <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 2.2 - <a href="http://extjs.com">extjs.com</a><br /><span id="loading-msg">Loading styles and images...</span></div>\r
111 </div>\r
112 \r
113 <div id="viewport">\r
114 \r
115 <div id="hd">\r
116         <h1><a href="http://extjs.com/" title="Home"><span>Ext</span></a></h1>\r
117 \r
118         <table cellspacing="0" class="nav main-nav">\r
119                 <tr>\r
120                 <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
121         </table>\r
122 \r
123 \r
124         <table cellspacing="0" class="sub-nav">\r
125                 <tr>\r
126                 <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>2.2 Samples</td></tr>\r
127         </table>\r
128 </div>\r
129 \r
130 <div id="bd">\r
131     <div class="left-column">\r
132             <h3>Ext JS 2.2 Samples</h3>\r
133         <br/>\r
134         <div id="sample-spacer" style="height:800px;"></div>\r
135 \r
136         <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />\r
137         <!--link rel="stylesheet" type="text/css" href="../resources/css/xtheme-gray.css" /-->\r
138         <link rel="stylesheet" type="text/css" href="shared/extjs/css/extjs.css" />\r
139 \r
140         <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>\r
141                 <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>\r
142                 <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>\r
143                 <script type="text/javascript" src="../ext-all.js"></script>\r
144                 <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>\r
145                 \r
146         <script type="text/javascript" src="shared/extjs/site.js"></script>\r
147         <script type="text/javascript" src="samples.js"></script>\r
148 \r
149         <div id="all-demos">\r
150         </div>\r
151 \r
152     </div>\r
153 \r
154         <div class="right-column" style="padding-top:45px;">\r
155 \r
156                 <div class="side-box"><div class="side-box-inner">\r
157             <ul id="sample-menu" class="features"></ul>\r
158             </div></div>\r
159     </div>\r
160 \r
161     <div style="clear:both"></div>\r
162 </div><!-- end bd -->\r
163 \r
164 <div id="ft">\r
165         <table cellspacing="0" class="nav">\r
166                 <tr>\r
167                 <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
168 \r
169         </table>\r
170         <div class="copy">&copy; 2006-2009 Ext, LLC</div>\r
171 </div>\r
172 \r
173 </div><!-- end viewport -->\r
174 \r
175 <div class="flyout-menu" id="products-menu" style="display:none;">\r
176         <div style="width:200px;">\r
177         <h3><a href="http://extjs.com/products/extjs">Ext JS</a></h3>\r
178         <p>Cross-browser JavaScript library for building rich internet applications</p>\r
179 \r
180         <ul>\r
181                 <li><a href="http://extjs.com/products/extjs">Overview</a></li>\r
182                 <li><a href="http://extjs.com/products/extjs/download.php">Download</a></li>\r
183                 <li><a href="http://extjs.com/deploy/dev/examples/samples.html">Samples &amp; Demos</a></li>\r
184                 <li><a href="http://extjs.com/deploy/dev/docs/">API Documentation</a></li>\r
185                 <li><a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a></li>\r
186 \r
187                 <li><a href="http://extjs.com/store/extjs/">Purchase</a></li>\r
188         </ul>\r
189         <br/>\r
190         <h3><a href="http://extjs.com/products/gxt">Ext GWT</a></h3>\r
191         <p>Java library for building rich internet applications with GWT</p>\r
192         <ul>\r
193                 <li><a href="http://extjs.com/products/gxt">Overview</a></li>\r
194 \r
195                 <li><a href="http://extjs.com/products/gxt/download.php">Download</a></li>\r
196                 <li><a href="http://extjs.com/explorer/" target="_blank">Samples &amp; Demos</a></li>\r
197                 <li><a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a></li>\r
198                 <li><a href="http://extjs.com/store/gxt/">Purchase</a></li>\r
199         </ul>\r
200 \r
201         </div>\r
202 </div>\r
203 \r
204 <div class="flyout-menu" id="support-menu" style="display:none;">\r
205         <div style="width:200px;">\r
206 \r
207         <h3><a href="http://extjs.com/support">Support Subscriptions</a></h3>\r
208         <p>With 1-on-1 email and phone support, we solve your Ext JS, GWT, CSS and JavaScript issues</p>\r
209         <ul>\r
210                 <li><a href="http://extjs.com/store/extjs/#support-table">Ext JS Subscriptions</a></li>\r
211                 <li><a href="http://extjs.com/store/gxt/#support-table">Ext GWT Subscriptions</a></li>\r
212         </ul>\r
213         <br/>\r
214 \r
215         <h3><a href="http://extjs.com/support/training">Training</a></h3>\r
216         <p>Get up to speed quickly with on-site training provided by Ext</p>\r
217         <ul>\r
218                 <li><a href="http://extjs.com/support/training/extjs/">Ext JS Training</a></li>\r
219                 <li><a href="http://extjs.com/support/training/gxt/">Ext GWT Training</a></li>\r
220         </ul>\r
221         <br/>\r
222 \r
223         <h3><a href="http://extjs.com/forum">Community</a></h3>\r
224         <p>The Ext community forums and wiki</p>\r
225         <ul>\r
226                 <li><a href="http://extjs.com/forum">Forums</a></li>\r
227                 <li><a href="http://extjs.com/learn">Learning Center</a></li>\r
228 \r
229         </ul>\r
230         <br/>\r
231         <h3><a href="http://extjs.com/forum">Ext Solutions</a></h3>\r
232         <p>Enterprise consulting and custom development</p>\r
233         <ul>\r
234                 <li><a href="http://extjs.com/support/services/">Find out more &raquo;</a></li>\r
235         </ul>\r
236         </div>\r
237 \r
238 </div>\r
239 \r
240 \r
241 <div class="flyout-menu" id="store-menu" style="display:none;">\r
242         <div style="width:200px;">\r
243         <h3><a href="http://extjs.com/store/extjs/">Ext JS</a></h3>\r
244         <ul>\r
245                 <li><a href="http://extjs.com/store/extjs/">Licenses</a></li>\r
246                 <li><a href="http://extjs.com/store/extjs/#support-table">Support Subscriptions</a></li>\r
247 \r
248         </ul>\r
249         <br/>\r
250         <h3><a href="http://extjs.com/store/gxt/">Ext GWT</a></h3>\r
251         <ul>\r
252                 <li><a href="http://extjs.com/store/gxt/">Licenses</a></li>\r
253                 <li><a href="http://extjs.com/store/gxt/#support-table">Support Subscriptions</a></li>\r
254         </ul>\r
255 \r
256         <br/>\r
257         <h3><a href="http://extjs.com/store/faq.php">Help</a></h3>\r
258         <ul>\r
259                 <li><a href="http://extjs.com/store/faq.php">Ordering FAQ</a></li>\r
260         </ul>\r
261         </div>\r
262 </div>\r
263 \r
264 </body>\r
265 </html>\r
266 \r
267 \r