examples/index.html

   1 <html>\r
   2 <head>\r
   3     <title>Ext JS 3.0 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     #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.0 - <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.0 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.0 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="../resources/css/xtheme-gray.css" /-->\r
 145         <link rel="stylesheet" type="text/css" href="shared/extjs/css/extjs.css" />\r
 146 \r
 147         <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>\r
 148         <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>\r
 149         <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>\r
 150         <script type="text/javascript" src="../ext-all.js"></script>\r
 151         <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>\r
 152 \r
 153         <!-- App.js contains Ext.App, a simple, re-usable Application component -->\r
 154         <script type="text/javascript" src="shared/extjs/App.js"></script>\r
 155         <script type="text/javascript" src="shared/extjs/site.js"></script>\r
 156         <script type="text/javascript" src="data.js"></script>\r
 157         <script type="text/javascript" src="init.js"></script>\r
 158 \r
 159         <div id="all-demos">\r
 160         </div>\r
 161 \r
 162     </div>\r
 163 \r
 164     <div class="right-column" style="padding-top:45px;">\r
 165 \r
 166         <div class="side-box"><div class="side-box-inner">\r
 167             <ul id="sample-menu" class="features"></ul>\r
 168         </div></div>\r
 169     </div>\r
 170 \r
 171     <div style="clear:both"></div>\r
 172 </div><!-- end bd -->\r
 173 \r
 174 <div id="ft">\r
 175     <table cellspacing="0" class="nav">\r
 176         <tr>\r
 177         <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
 178 \r
 179     </table>\r
 180     <div class="copy">&copy; 2006-2009 Ext, LLC</div>\r
 181 </div>\r
 182 \r
 183 </div><!-- end viewport -->\r
 184 \r
 185 <div class="flyout-menu" id="products-menu" style="display:none;">\r
 186     <div style="width:200px;">\r
 187     <h3><a href="http://extjs.com/products/extjs">Ext JS</a></h3>\r
 188     <p>Cross-browser JavaScript library for building rich internet applications</p>\r
 189 \r
 190     <ul>\r
 191         <li><a href="http://extjs.com/products/extjs">Overview</a></li>\r
 192         <li><a href="http://extjs.com/products/extjs/download.php">Download</a></li>\r
 193         <li><a href="http://extjs.com/deploy/dev/examples/samples.html">Samples &amp; Demos</a></li>\r
 194         <li><a href="http://extjs.com/deploy/dev/docs/">API Documentation</a></li>\r
 195         <li><a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a></li>\r
 196 \r
 197         <li><a href="http://extjs.com/store/extjs/">Purchase</a></li>\r
 198     </ul>\r
 199     <br/>\r
 200     <h3><a href="http://extjs.com/products/gxt">Ext GWT</a></h3>\r
 201     <p>Java library for building rich internet applications with GWT</p>\r
 202     <ul>\r
 203         <li><a href="http://extjs.com/products/gxt">Overview</a></li>\r
 204 \r
 205         <li><a href="http://extjs.com/products/gxt/download.php">Download</a></li>\r
 206         <li><a href="http://extjs.com/explorer/" target="_blank">Samples &amp; Demos</a></li>\r
 207         <li><a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a></li>\r
 208         <li><a href="http://extjs.com/store/gxt/">Purchase</a></li>\r
 209     </ul>\r
 210     <br/>\r
 211     <h3><a href="/products/extcore">Ext Core</a></h3>\r
 212     <p>Cross-browser JavaScript library for enhancing web pages</p>\r
 213     <ul>\r
 214         <li><a href="http://extjs.com/products/extcore">Overview</a></li>\r
 215         <li><a href="http://extjs.com/products/extcore/download.php">Download</a></li>\r
 216         <li><a href="http://extjs.com/products/extcore/manual/">Manual</a></li>\r
 217         <li><a href="http://extjs.com/products/extcore/docs/">API Documentation</a></li>\r
 218     </ul>\r
 219     </div>\r
 220 </div>\r
 221 \r
 222 <div class="flyout-menu" id="support-menu" style="display:none;">\r
 223     <div style="width:200px;">\r
 224 \r
 225     <h3><a href="http://extjs.com/support">Support Subscriptions</a></h3>\r
 226     <p>With 1-on-1 email and phone support, we solve your Ext JS, GWT, CSS and JavaScript issues</p>\r
 227     <ul>\r
 228         <li><a href="http://extjs.com/store/extjs/#support-table">Ext JS Subscriptions</a></li>\r
 229         <li><a href="http://extjs.com/store/gxt/#support-table">Ext GWT Subscriptions</a></li>\r
 230     </ul>\r
 231     <br/>\r
 232 \r
 233     <h3><a href="http://extjs.com/support/training">Training</a></h3>\r
 234     <p>Get up to speed quickly with on-site training provided by Ext</p>\r
 235     <ul>\r
 236         <li><a href="http://extjs.com/support/training/extjs/">Ext JS Training</a></li>\r
 237         <li><a href="http://extjs.com/support/training/gxt/">Ext GWT Training</a></li>\r
 238     </ul>\r
 239     <br/>\r
 240 \r
 241     <h3><a href="http://extjs.com/forum">Community</a></h3>\r
 242     <p>The Ext community forums and wiki</p>\r
 243     <ul>\r
 244         <li><a href="http://extjs.com/forum">Forums</a></li>\r
 245         <li><a href="http://extjs.com/learn">Learning Center</a></li>\r
 246 \r
 247     </ul>\r
 248     <br/>\r
 249     <h3><a href="http://extjs.com/forum">Ext Solutions</a></h3>\r
 250     <p>Enterprise consulting and custom development</p>\r
 251     <ul>\r
 252         <li><a href="http://extjs.com/support/services/">Find out more &raquo;</a></li>\r
 253     </ul>\r
 254     </div>\r
 255 \r
 256 </div>\r
 257 \r
 258 \r
 259 <div class="flyout-menu" id="store-menu" style="display:none;">\r
 260     <div style="width:200px;">\r
 261     <h3><a href="http://extjs.com/store/extjs/">Ext JS</a></h3>\r
 262     <ul>\r
 263         <li><a href="http://extjs.com/store/extjs/">Licenses</a></li>\r
 264         <li><a href="http://extjs.com/store/extjs/#support-table">Support Subscriptions</a></li>\r
 265 \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>