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
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js">/*
\r
10 * Copyright(c) 2006-2008, Ext JS, LLC.
\r
11 * licensing@extjs.com
\r
13 * http://extjs.com/license
\r
17 Ext.onReady(function(){
\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
26 statusBar.showBusy();
\r
29 statusBar.clearStatus({useDefaults:true});
\r
35 * ================ Basic StatusBar example =======================
\r
38 title: 'Basic StatusBar',
\r
42 bodyStyle: 'padding:10px;',
\r
47 handler: loadFn.createCallback('basic-button', 'basic-statusbar')
\r
49 bbar: new Ext.ux.StatusBar({
\r
50 defaultText: 'Default status',
\r
51 id: 'basic-statusbar',
\r
54 }, '-', 'Plain Text', ' ', ' ']
\r
59 * ================ Right-aligned StatusBar example =======================
\r
62 title: 'Right-aligned StatusBar',
\r
63 renderTo: 'right-aligned',
\r
66 bodyStyle: 'padding:10px;',
\r
71 handler: loadFn.createCallback('right-button', 'right-statusbar')
\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
79 }, '-', 'Plain Text', ' ', ' ']
\r
84 * ================ StatusBar Window example =======================
\r
86 var win = new Ext.Window({
\r
87 title: 'StatusBar Window',
\r
92 closeAction: 'hide',
\r
93 bodyStyle: 'padding:10px;',
\r
98 handler: loadFn.createCallback('win-button', 'win-statusbar')
\r
100 bbar: new Ext.ux.StatusBar({
\r
101 id: 'win-statusbar',
\r
102 defaultText: 'Ready',
\r
106 new Date().format('n/d/Y'), ' ', ' ', '-', {
\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
118 text: 'Show Window',
\r
119 renderTo: 'window',
\r
120 handler: function(){
\r
126 * ================ Ext Word Processor example =======================
\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
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
139 title: 'Ext Word Processor',
\r
140 renderTo: 'word-proc',
\r
143 bodyStyle: 'padding:5px;',
\r
145 bbar: new Ext.ux.StatusBar({
\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
154 id: 'word-textarea',
\r
155 enableKeyEvents: true,
\r
160 // After each keypress update the word and character count text items
\r
163 var v = t.getValue(),
\r
164 wc = 0, cc = v.length ? v.length : 0;
\r
167 wc = v.match(/\b/g);
\r
168 wc = wc ? wc.length / 2 : 0;
\r
170 Ext.fly(wordCount.getEl()).update('Words: '+wc);
\r
171 Ext.fly(charCount.getEl()).update('Chars: '+cc);
\r
173 buffer: 1 // buffer to allow the value to update first
\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
188 // Kick off the clock timer that updates the clock el every second:
\r
189 Ext.TaskMgr.start({
\r
191 Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
\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
210 iconCls: 'x-status-saved',
\r
211 text: 'Draft auto-saved at ' + new Date().format('g:i:s A')
\r
214 }, this, {buffer:1500});
\r