3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
7 Ext.onReady(function(){
9 // This is a shared function that simulates a load action on a StatusBar.
10 // It is reused by most of the example panels.
11 var loadFn = function(btn, statusBar){
12 btn = Ext.getCmp(btn);
13 statusBar = Ext.getCmp(statusBar);
19 statusBar.clearStatus({useDefaults:true});
25 * ================ Basic StatusBar example =======================
28 title: 'Basic StatusBar',
32 bodyStyle: 'padding:10px;',
37 handler: loadFn.createCallback('basic-button', 'basic-statusbar')
39 bbar: new Ext.ux.StatusBar({
40 id: 'basic-statusbar',
42 // defaults to use when the status is cleared:
43 defaultText: 'Default status text',
44 //defaultIconCls: 'default-icon',
46 // values to set initially:
48 iconCls: 'x-status-valid',
50 // any standard Toolbar items:
53 text: 'Show Warning & Clear',
55 var sb = Ext.getCmp('basic-statusbar');
58 iconCls: 'x-status-error',
59 clear: true // auto-clear after a set interval
66 var sb = Ext.getCmp('basic-statusbar');
67 // Set the status bar to show that something is processing:
74 var sb = Ext.getCmp('basic-statusbar');
86 * ================ Right-aligned StatusBar example =======================
89 title: 'Right-aligned StatusBar',
90 renderTo: 'right-aligned',
93 bodyStyle: 'padding:10px;',
98 handler: loadFn.createCallback('right-button', 'right-statusbar')
100 bbar: new Ext.ux.StatusBar({
101 defaultText: 'Default status',
102 id: 'right-statusbar',
103 statusAlign: 'right', // the magic config
106 }, '-', 'Plain Text', ' ', ' ']
111 * ================ StatusBar Window example =======================
113 var win = new Ext.Window({
114 title: 'StatusBar Window',
120 bodyStyle: 'padding:10px;',
125 handler: loadFn.createCallback('win-button', 'win-statusbar')
127 bbar: new Ext.ux.StatusBar({
129 defaultText: 'Ready',
133 new Date().format('n/d/Y'), ' ', ' ', '-', {
137 menu: new Ext.menu.Menu({
138 items: [{text: 'Item 1'}, {text: 'Item 2'}]
153 * ================ Ext Word Processor example =======================
155 * The StatusBar used in this example is completely standard. What is
156 * customized are the styles and event handling to make the example a
157 * lot more dynamic and application-oriented.
160 // Create these explicitly so we can manipulate them later
161 var wordCount = new Ext.Toolbar.TextItem('Words: 0');
162 var charCount = new Ext.Toolbar.TextItem('Chars: 0');
163 var clock = new Ext.Toolbar.TextItem('');
166 title: 'Ext Word Processor',
167 renderTo: 'word-proc',
170 bodyStyle: 'padding:5px;',
172 bbar: new Ext.ux.StatusBar({
174 // These are just the standard toolbar TextItems we created above. They get
175 // custom classes below in the render handler which is what gives them their
176 // customized inset appearance.
177 items: [wordCount, ' ', charCount, ' ', clock, ' ']
182 enableKeyEvents: true,
187 // After each keypress update the word and character count text items
190 var v = t.getValue(),
191 wc = 0, cc = v.length ? v.length : 0;
195 wc = wc ? wc.length / 2 : 0;
197 Ext.fly(wordCount.getEl()).update('Words: '+wc);
198 Ext.fly(charCount.getEl()).update('Chars: '+cc);
200 buffer: 1 // buffer to allow the value to update first
207 // Add a class to the parent TD of each text item so we can give them some custom inset box
208 // styling. Also, since we are using a greedy spacer, we have to add a block level element
209 // into each text TD in order to give them a fixed width (TextItems are spans). Insert a
210 // spacer div into each TD using createChild() so that we can give it a width in CSS.
211 Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
212 Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
213 Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
215 // Kick off the clock timer that updates the clock el every second:
218 Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
228 // This sets up a fake auto-save function. It monitors keyboard activity and after no typing
229 // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.
230 // After a fake delay so that you can see the save activity it will update again to indicate
231 // that the action succeeded.
232 Ext.fly('word-textarea').on('keypress', function(){
233 var sb = Ext.getCmp('word-status');
234 sb.showBusy('Saving draft...');
237 iconCls: 'x-status-saved',
238 text: 'Draft auto-saved at ' + new Date().format('g:i:s A')
241 }, this, {buffer:1500});