Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / simple-widgets / progress-bar.html
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
4 <title>ProgressBar</title>
5
6 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
7 <!-- GC -->
8         <!-- LIBS -->
9         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
10         <!-- ENDLIBS -->
11
12 <script type="text/javascript" src="../../ext-all.js"></script>
13 <script type="text/javascript" src="progress-bar.js"></script>
14 <link rel="stylesheet" type="text/css" href="progress-bar.css" />
15
16 <!-- Common Styles for the examples -->
17 <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
18 </head>
19 <body>
20 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
21 <h1>Progress Bar</h1>
22 <p>The example shows how to use the ProgressBar class. The js is not minified so it is readable.
23 See <a href="progress-bar.js">progress-bar.js</a>.</p>
24
25 <p>
26     <b>Basic Progress Bar</b><br />
27     Deferred rendering, dynamic show/hide and built-in progress text:
28     <button id="btn1">Show</button><br />
29     <div class="status" id="p1text">Nothing to see here.</div>
30     <div id="p1" style="width:300px;"></div>
31 </p>
32
33 <p>
34     <b>Additional Options</b><br />
35     Rendered on page load, left-aligned text and % width:
36     <button id="btn2">Show</button><br />
37     <div id="p2" style="width:50%;"></div>
38 </p>
39
40 <p>
41     <b>Waiting Bar</b><br />
42     Wait for a long operation to complete (example will stop after 5 secs):
43     <button id="btn3">Show</button><br />
44     <div id="p3"></div>
45     <span class="status" id="p3text">Ready</span>
46 </p>
47
48 <p>
49     <b>Custom Styles</b><br />
50     Rendered like Windows XP with custom progress text element:
51     <button id="btn4">Show</button><br />
52     <div id="p4" style="width:300px;"></div>
53     <div class="status"><b>Status:</b> <span id="p4text"></span></div>
54 </p>
55
56 </body>
57 </html>