examples/index.html

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