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