examples/newindex.html

   1 <html>
   2 <head>
   3     <title>Ext JS 4.0 Examples</title>
   4
   5     <style type="text/css">
   6
   7     #all-demos {
   8
   9     }
  10     #all-demos dd {
  11         cursor:pointer;
  12         float:left;
  13         height:100px;
  14         margin:5px 5px 5px 10px;
  15         width:300px;
  16         zoom:1;
  17     }
  18     #all-demos dd img {
  19         border: 1px solid #ddd;
  20         float:left;
  21         height:90px;
  22         margin:5px 0 0 5px;
  23         width:120px;
  24     }
  25
  26     #all-demos dd div {
  27         float:left;
  28         margin-left:10px;
  29         width:160px;
  30     }
  31
  32     #all-demos dd h4 {
  33         color:#555;
  34         font-size:11px;
  35         font-weight:bold;
  36     }
  37     #all-demos dd p {
  38         color:#777;
  39     }
  40     #all-demos dd.over {
  41         background: #F5FDE3 url(shared/extjs/images/sample-over.gif) no-repeat;
  42     }
  43     #loading-mask{
  44         background-color:white;
  45         height:100%;
  46         position:absolute;
  47         left:0;
  48         top:0;
  49         width:100%;
  50         z-index:20000;
  51     }
  52     #loading{
  53         height:auto;
  54         position:absolute;
  55         left:45%;
  56         top:40%;
  57         padding:2px;
  58         z-index:20001;
  59     }
  60     #loading a {
  61         color:#225588;
  62     }
  63     #loading .loading-indicator{
  64         background:white;
  65         color:#444;
  66         font:bold 13px Helvetica, Arial, sans-serif;
  67         height:auto;
  68         margin:0;
  69         padding:10px;
  70     }
  71     #loading-msg {
  72         font-size: 10px;
  73         font-weight: normal;
  74     }
  75
  76     #all-demos .x-panel-body {
  77         background-color:#fff;
  78         border:1px solid;
  79         border-color:#fafafa #fafafa #fafafa #fafafa;
  80     }
  81     #sample-ct {
  82         border:1px solid;
  83         border-color:#dadada #ebebeb #ebebeb #dadada;
  84         padding:2px;
  85         font: 11px tahoma,arial,helvetica,sans-serif
  86     }
  87
  88     #all-demos h2 {
  89         border-bottom: 2px solid #99bbe8;
  90         cursor:pointer;
  91         padding-top:6px;
  92     }
  93     #all-demos h2 div {
  94         background:transparent url(../resources/themes/images/default/grid/group-expand-sprite.gif) no-repeat 3px -47px;
  95         color:#3764a0;
  96         font:bold 11px Helvetica, Arial, sans-serif;
  97         padding:4px 4px 4px 17px;
  98     }
  99     #all-demos .collapsed h2 div {
 100         background-position: 3px 3px;
 101     }
 102     #all-demos .collapsed dl {
 103         display:none;
 104     }
 105     .x-window {
 106         text-align:left;
 107     }
 108     #all-demos dd h4 span.new-sample{
 109         color: red;
 110     }
 111
 112     #all-demos dd h4 span.updated-sample{
 113         color: blue;
 114     }
 115     li {
 116                 list-style: inherit !important;
 117     }
 118
 119     </style>
 120 </head>
 121 <body>
 122     <div id="loading-mask" style=""></div>
 123     <div id="loading">
 124         <div class="loading-indicator">
 125             <img src="shared/extjs/images/extanim32.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>Ext JS 4.0 - <a href="http://www.sencha.com">sencha.com</a>
 126             <br /><span id="loading-msg">Loading styles and images...</span>
 127         </div>
 128     </div>
 129
 130     <div id="viewport">
 131
 132         <div id="hd">
 133             <a href="http://www.sencha.com" id="logo"><img src="../welcome/img/logo-sencha-sm.png" alt="Sencha" width="120" height="50" /></a>
 134         </div>
 135
 136     <div id="bd">
 137         <h1 id="pagetitle">
 138             Ext JS 4.0 Samples
 139             <div>
 140                 <a href="../docs/index.html">View Documentation</a>
 141                 <a href="../release-notes.html">Release Notes</a>
 142                 <a href="../overview/index.html">Upgrade Overview</a>
 143             </div>
 144         </h1>
 145         <div class="left-column">
 146             <div id="sample-spacer" style="height:800px;"></div>
 147
 148             <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
 149             <link rel="stylesheet" type="text/css" href="shared/extjs/css/extjs.css" />
 150
 151             <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
 152             <script type="text/javascript" src="../ext-all-debug.js"></script>
 153             <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
 154             <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>
 155
 156             <!-- App.js contains Ext.App, a simple, re-usable Application component -->
 157             <script type="text/javascript" src="shared/extjs/App.js"></script>
 158             <script type="text/javascript" src="shared/extjs/site.js"></script>
 159             <script type="text/javascript" src="data.js"></script>
 160             <script type="text/javascript" src="init.js"></script>
 161
 162             <div id="all-demos">
 163             </div>
 164         </div>
 165
 166         <div class="right-column">
 167             <div class="side-box"><div class="side-box-inner">
 168                 <ul id="sample-menu" class="features"></ul>
 169             </div></div>
 170         </div>
 171
 172         <div style="clear:both"></div>
 173     </div><!-- end bd -->
 174
 175     <div id="ft">
 176         <div class="copy">&copy; 2006-2011 Sencha Inc.</div>
 177     </div>
 178
 179     </div><!-- end viewport -->
 180
 181 </body>
 182 </html>