Upgrade to ExtJS 3.3.0 - Released 10/06/2010
[extjs.git] / examples / index.html
index 51b64c6..c1c798a 100644 (file)
@@ -1,34 +1,38 @@
 <html>
 <head>
-    <title>Ext JS 3.2 Examples</title>
+    <title>Ext JS 3.3 Examples</title>
 
     <style type="text/css">
+    .x-panel-mc {
+        font-family: Helvetica, Arial, sans-serif !important;
+    }
+    
     #all-demos {
 
     }
     #all-demos dd {
+        cursor:pointer;
         float:left;
-        width:300px;
         height:100px;
         margin:5px 5px 5px 10px;
-        cursor:pointer;
+        width:300px;
         zoom:1;
     }
     #all-demos dd img {
-        width:120px;
+        border: 1px solid #ddd;
+        float:left;
         height:90px;
         margin:5px 0 0 5px;
-        float:left;
+        width:120px;
     }
 
     #all-demos dd div {
         float:left;
-        width:160px;
         margin-left:10px;
+        width:160px;
     }
 
     #all-demos dd h4 {
-        font-family:tahoma,arial,san-serif;
         color:#555;
         font-size:11px;
         font-weight:bold;
         background: #F5FDE3 url(shared/extjs/images/sample-over.gif) no-repeat;
     }
     #loading-mask{
+        background-color:white;
+        height:100%;
         position:absolute;
         left:0;
         top:0;
         width:100%;
-        height:100%;
         z-index:20000;
-        background-color:white;
     }
     #loading{
+        height:auto;
         position:absolute;
         left:45%;
         top:40%;
         padding:2px;
         z-index:20001;
-        height:auto;
     }
     #loading a {
         color:#225588;
     #loading .loading-indicator{
         background:white;
         color:#444;
-        font:bold 13px tahoma,arial,helvetica;
-        padding:10px;
-        margin:0;
+        font:bold 13px Helvetica, Arial, sans-serif;
         height:auto;
+        margin:0;
+        padding:10px;
     }
     #loading-msg {
-        font: normal 10px arial,tahoma,sans-serif;
+        font-size: 10px;
+        font-weight: normal;
     }
 
     #all-demos .x-panel-body {
@@ -89,9 +94,9 @@
     }
     #all-demos h2 div {
         background:transparent url(../resources/images/default/grid/group-expand-sprite.gif) no-repeat 3px -47px;
-        padding:4px 4px 4px 17px;
         color:#3764a0;
-        font:bold 11px tahoma, arial, helvetica, sans-serif;
+        font:bold 11px Helvetica, Arial, sans-serif;
+        padding:4px 4px 4px 17px;
     }
     #all-demos .collapsed h2 div {
         background-position: 3px 3px;
 <body>
 <div id="loading-mask" style=""></div>
 <div id="loading">
-    <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>
+    <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.3 - <a href="http://www.sencha.com">sencha.com</a><br /><span id="loading-msg">Loading styles and images...</span></div>
 </div>
 
 <div id="viewport">
 
 <div id="hd">
-    <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>
-
-    <table cellspacing="0" class="nav main-nav">
-        <tr>
-        <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>
-    </table>
+    <a href="/" id="logo"><img src="../welcome/images/logo-sencha-sm.png" alt="Sencha" width="120" height="50" /></a>
 
-
-    <table cellspacing="0" class="sub-nav">
-        <tr>
-        <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>
-    </table>
 </div>
 
 <div id="bd">
+    <h1 id="pagetitle">Ext JS 3.3 Samples <a href="../docs/">View Documentation</a></h1>
     <div class="left-column">
-        <h3>Ext JS 3.2 Samples</h3>
-        <br/>
         <div id="sample-spacer" style="height:800px;"></div>
 
         <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
         <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
         <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
         <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
-        <script type="text/javascript" src="../ext-all.js"></script>
+        <script type="text/javascript" src="../ext-all-debug.js"></script>
         <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>
 
         <!-- App.js contains Ext.App, a simple, re-usable Application component -->
         </div>
     </div>
 
-    <div class="right-column" style="padding-top:45px;">
+    <div class="right-column">
         <div class="side-box"><div class="side-box-inner">
             <ul id="sample-menu" class="features"></ul>
         </div></div>
 </div><!-- end bd -->
 
 <div id="ft">
-    <table cellspacing="0" class="nav">
-        <tr>
-        <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>
-
-    </table>
-    <div class="copy">&copy; 2006-2010 Ext JS, Inc.</div>
+    <div class="copy">&copy; 2006-2010 Sencha Inc.</div>
 </div>
 
 </div><!-- end viewport -->
 
-<div class="flyout-menu" id="products-menu" style="display:none;">
-    <div style="width:200px;">
-    <h3><a href="http://www.extjs.com/products/designer/">Ext Designer</a></h3>
-    <p>Desktop app for creating amazing web interfaces with drag and drop.</p>
-
-    <ul>
-        <li><a href="http://www.extjs.com/products/designer/">Overview</a></li>
-        <li><a href="http://www.extjs.com/products/designer/download.php">Download</a></li>
-        <li><a href="http://www.extjs.com/store/designer/">Purchase</a></li>
-    </ul>
-    <br/>
-    <h3><a href="http://extjs.com/products/extjs">Ext JS</a></h3>
-    <p>Cross-browser JavaScript library for building rich internet applications</p>
-
-    <ul>
-        <li><a href="http://extjs.com/products/extjs">Overview</a></li>
-        <li><a href="http://extjs.com/products/extjs/download.php">Download</a></li>
-        <li><a href="http://extjs.com/deploy/dev/examples/">Examples &amp; Demos</a></li>
-        <li><a href="http://extjs.com/deploy/dev/docs/">API Documentation</a></li>
-        <li><a href="http://extjs.com/products/extjs/commitlog.php">Public Commit Log</a></li>
-        <li><a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a></li>
-        <li><a href="http://extjs.com/store/extjs/">Purchase</a></li>
-    </ul>
-    <br/>
-    <h3><a href="http://extjs.com/products/gxt">Ext GWT</a></h3>
-    <p>Java library for building rich internet applications with GWT</p>
-    <ul>
-        <li><a href="http://extjs.com/products/gxt">Overview</a></li>
-
-        <li><a href="http://extjs.com/products/gxt/download.php">Download</a></li>
-        <li><a href="http://extjs.com/examples/" target="_blank">Samples &amp; Demos</a></li>
-        <li><a href="http://extjs.com/products/license.php">Licensing &amp; Open Source</a></li>
-        <li><a href="http://extjs.com/store/gxt/">Purchase</a></li>
-    </ul>
-    <br/>
-    <h3><a href="/products/extcore">Ext Core</a></h3>
-    <p>Cross-browser JavaScript library for enhancing web pages</p>
-    <ul>
-        <li><a href="http://extjs.com/products/extcore">Overview</a></li>
-        <li><a href="http://extjs.com/products/extcore/download.php">Download</a></li>
-        <li><a href="http://extjs.com/products/extcore/manual/">Manual</a></li>
-        <li><a href="http://extjs.com/products/extcore/docs/">API Documentation</a></li>
-    </ul>
-       <br/>
-       <h3><a href="http://extjs.com/products/jsbuilder/">JSBuilder</a></h3>
-       <p>Cross-platform Tool to Manage Building Ext Applications</p>
-       <ul>
-               <li><a href="http://extjs.com/products/jsbuilder/">Download</a></li>
-       </ul>
-       </div>
-</div>
-
-<div class="flyout-menu" id="support-menu" style="display:none;">
-    <div style="width:200px;">
-
-    <h3><a href="http://extjs.com/support">Support Subscriptions</a></h3>
-    <p>With 1-on-1 email and phone support, we solve your Ext JS, GWT, CSS and JavaScript issues</p>
-    <ul>
-        <li><a href="http://extjs.com/store/extjs/#support-table">Ext JS Subscriptions</a></li>
-        <li><a href="http://extjs.com/store/gxt/#support-table">Ext GWT Subscriptions</a></li>
-    </ul>
-    <br/>
-
-    <h3><a href="http://extjs.com/support/training">Training</a></h3>
-    <p>Get up to speed quickly with on-site training provided by Ext</p>
-    <ul>
-        <li><a href="http://extjs.com/support/training/extjs/">Ext JS Training</a></li>
-        <li><a href="http://extjs.com/support/training/gxt/">Ext GWT Training</a></li>
-    </ul>
-    <br/>
-
-    <h3><a href="http://extjs.com/forum">Community</a></h3>
-    <p>The Ext community forums and wiki</p>
-    <ul>
-        <li><a href="http://extjs.com/forum">Forums</a></li>
-        <li><a href="http://extjs.com/learn">Learning Center</a></li>
-    </ul>
-    <br/>
-    <h3><a href="http://extjs.com/forum">Ext Solutions</a></h3>
-    <p>Enterprise consulting and custom development</p>
-    <ul>
-        <li><a href="http://extjs.com/support/services/">Find out more &raquo;</a></li>
-    </ul>
-    </div>
-
-</div>
-
-<div class="flyout-menu" id="store-menu" style="display:none;">
-    <div style="width:200px;">
-    <h3><a href="http://extjs.com/store/extjs/">Ext JS</a></h3>
-    <ul>
-        <li><a href="http://extjs.com/store/extjs/">Licenses</a></li>
-        <li><a href="http://extjs.com/store/extjs/#support-table">Support Subscriptions</a></li>
-    </ul>
-    <br/>
-    <h3><a href="http://extjs.com/store/gxt/">Ext GWT</a></h3>
-    <ul>
-        <li><a href="http://extjs.com/store/gxt/">Licenses</a></li>
-        <li><a href="http://extjs.com/store/gxt/#support-table">Support Subscriptions</a></li>
-    </ul>
-
-    <br/>
-    <h3><a href="http://extjs.com/store/faq.php">Help</a></h3>
-    <ul>
-        <li><a href="http://extjs.com/store/faq.php">Ordering FAQ</a></li>
-    </ul>
-    </div>
-</div>
 
 </body>
 </html>