Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / statusbar-demo.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">/*\r
9  * Ext JS Library 2.2\r
10  * Copyright(c) 2006-2008, Ext JS, LLC.\r
11  * licensing@extjs.com\r
12  *\r
13  * http://extjs.com/license\r
14  */\r
15 \r
16 \r
17 Ext.onReady(function(){\r
18 \r
19     // This is a shared function that simulates a load action on a StatusBar.\r
20     // It is reused by most of the example panels.\r
21     var loadFn = function(btn, statusBar){\r
22         btn = Ext.getCmp(btn);\r
23         statusBar = Ext.getCmp(statusBar);\r
24 \r
25         btn.disable();\r
26         statusBar.showBusy();\r
27 \r
28         (function(){\r
29             statusBar.clearStatus({useDefaults:true});\r
30             btn.enable();\r
31         }).defer(2000);\r
32     };\r
33 \r
34 /*\r
35  * ================  Basic StatusBar example  =======================\r
36  */\r
37     new Ext.Panel({\r
38         title: 'Basic StatusBar',\r
39         renderTo: 'basic',\r
40         width: 350,\r
41         height: 100,\r
42         bodyStyle: 'padding:10px;',\r
43         items:[{\r
44             xtype: 'button',\r
45             id: 'basic-button',\r
46             text: 'Do Loading',\r
47             handler: loadFn.createCallback('basic-button', 'basic-statusbar')\r
48         }],\r
49         bbar: new Ext.ux.StatusBar({\r
50             defaultText: 'Default status',\r
51             id: 'basic-statusbar',\r
52                 items: [{\r
53                     text: 'A Button'\r
54                 }, '-', 'Plain Text', ' ', ' ']\r
55         })\r
56     });\r
57 \r
58 /*\r
59  * ================  Right-aligned StatusBar example  =======================\r
60  */\r
61     new Ext.Panel({\r
62         title: 'Right-aligned StatusBar',\r
63         renderTo: 'right-aligned',\r
64         width: 350,\r
65         height: 100,\r
66         bodyStyle: 'padding:10px;',\r
67         items:[{\r
68             xtype: 'button',\r
69             id: 'right-button',\r
70             text: 'Do Loading',\r
71             handler: loadFn.createCallback('right-button', 'right-statusbar')\r
72         }],\r
73         bbar: new Ext.ux.StatusBar({\r
74             defaultText: 'Default status',\r
75             id: 'right-statusbar',\r
76             statusAlign: 'right', // the magic config\r
77             items: [{\r
78                 text: 'A Button'\r
79             }, '-', 'Plain Text', ' ', ' ']\r
80         })\r
81     });\r
82 \r
83 /*\r
84  * ================  StatusBar Window example  =======================\r
85  */\r
86     var win = new Ext.Window({\r
87         title: 'StatusBar Window',\r
88         width: 400,\r
89         minWidth: 350,\r
90         height: 150,\r
91         modal: true,\r
92         closeAction: 'hide',\r
93         bodyStyle: 'padding:10px;',\r
94         items:[{\r
95             xtype: 'button',\r
96             id: 'win-button',\r
97             text: 'Do Loading',\r
98             handler: loadFn.createCallback('win-button', 'win-statusbar')\r
99         }],\r
100         bbar: new Ext.ux.StatusBar({\r
101             id: 'win-statusbar',\r
102             defaultText: 'Ready',\r
103             items: [{\r
104                 text: 'A Button'\r
105             }, '-',\r
106             new Date().format('n/d/Y'), ' ', ' ', '-', {\r
107                 xtype:'tbsplit',\r
108                 text:'Status Menu',\r
109                 menuAlign: 'br-tr?',\r
110                 menu: new Ext.menu.Menu({\r
111                     items: [{text: 'Item 1'}, {text: 'Item 2'}]\r
112                 })\r
113             }]\r
114         })\r
115     });\r
116 \r
117     new Ext.Button({\r
118         text: 'Show Window',\r
119         renderTo: 'window',\r
120         handler: function(){\r
121             win.show();\r
122         }\r
123     });\r
124 \r
125 /*\r
126  * ================  Ext Word Processor example  =======================\r
127  *\r
128  * The StatusBar used in this example is completely standard.  What is\r
129  * customized are the styles and event handling to make the example a\r
130  * lot more dynamic and application-oriented.\r
131  *\r
132  */\r
133     // Create these explicitly so we can manipulate them later\r
134     var wordCount = new Ext.Toolbar.TextItem('Words: 0');\r
135     var charCount = new Ext.Toolbar.TextItem('Chars: 0');\r
136     var clock = new Ext.Toolbar.TextItem('');\r
137 \r
138     new Ext.Panel({\r
139         title: 'Ext Word Processor',\r
140         renderTo: 'word-proc',\r
141         width: 500,\r
142         autoHeight: true,\r
143         bodyStyle: 'padding:5px;',\r
144         layout: 'fit',\r
145         bbar: new Ext.ux.StatusBar({\r
146             id: 'word-status',\r
147             // These are just the standard toolbar TextItems we created above.  They get\r
148             // custom classes below in the render handler which is what gives them their\r
149             // customized inset appearance.\r
150             items: [wordCount, ' ', charCount, ' ', clock, ' ']\r
151         }),\r
152         items: {\r
153             xtype: 'textarea',\r
154             id: 'word-textarea',\r
155             enableKeyEvents: true,\r
156             grow: true,\r
157             growMin: 100,\r
158             growMax: 200,\r
159             listeners: {\r
160                 // After each keypress update the word and character count text items\r
161                 'keypress': {\r
162                     fn: function(t){\r
163                         var v = t.getValue(),\r
164                             wc = 0, cc = v.length ? v.length : 0;\r
165 \r
166                         if(cc > 0){\r
167                             wc = v.match(/\b/g);\r
168                             wc = wc ? wc.length / 2 : 0;\r
169                         }\r
170                             Ext.fly(wordCount.getEl()).update('Words: '+wc);\r
171                         Ext.fly(charCount.getEl()).update('Chars: '+cc);\r
172                         },\r
173                     buffer: 1 // buffer to allow the value to update first\r
174                 }\r
175             }\r
176         },\r
177         listeners: {\r
178             render: {\r
179                 fn: function(){\r
180                     // Add a class to the parent TD of each text item so we can give them some custom inset box\r
181                     // styling. Also, since we are using a greedy spacer, we have to add a block level element\r
182                     // into each text TD in order to give them a fixed width (TextItems are spans).  Insert a\r
183                     // spacer div into each TD using createChild() so that we can give it a width in CSS.\r
184                     Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
185                     Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
186                     Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});\r
187 \r
188                     // Kick off the clock timer that updates the clock el every second:\r
189                                     Ext.TaskMgr.start({\r
190                                         run: function(){\r
191                                             Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));\r
192                                         },\r
193                                         interval: 1000\r
194                                     });\r
195                 },\r
196                 delay: 100\r
197             }\r
198         }\r
199     });\r
200 \r
201     // This sets up a fake auto-save function.  It monitors keyboard activity and after no typing\r
202     // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.\r
203     // After a fake delay so that you can see the save activity it will update again to indicate\r
204     // that the action succeeded.\r
205     Ext.fly('word-textarea').on('keypress', function(){\r
206         var sb = Ext.getCmp('word-status');\r
207         sb.showBusy('Saving draft...');\r
208         (function(){\r
209             sb.setStatus({\r
210                 iconCls: 'x-status-saved',\r
211                 text: 'Draft auto-saved at ' + new Date().format('g:i:s A')\r
212             });\r
213         }).defer(4000);\r
214     }, this, {buffer:1500});\r
215 \r
216 });</pre>    \r
217 </body>\r
218 </html>