index.html 10 KB

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