/*
+ * Ext JS Library 2.2
+ * Copyright(c) 2006-2008, Ext JS, LLC.
+ * licensing@extjs.com
+ *
+ * http://extjs.com/license
+ */
+
+
+Ext.onReady(function(){
+
+ // This is a shared function that simulates a load action on a StatusBar.
+ // It is reused by most of the example panels.
+ var loadFn = function(btn, statusBar){
+ btn = Ext.getCmp(btn);
+ statusBar = Ext.getCmp(statusBar);
+
+ btn.disable();
+ statusBar.showBusy();
+
+ (function(){
+ statusBar.clearStatus({useDefaults:true});
+ btn.enable();
+ }).defer(2000);
+ };
+
+/*
+ * ================ Basic StatusBar example =======================
+ */
+ new Ext.Panel({
+ title: 'Basic StatusBar',
+ renderTo: 'basic',
+ width: 350,
+ height: 100,
+ bodyStyle: 'padding:10px;',
+ items:[{
+ xtype: 'button',
+ id: 'basic-button',
+ text: 'Do Loading',
+ handler: loadFn.createCallback('basic-button', 'basic-statusbar')
+ }],
+ bbar: new Ext.ux.StatusBar({
+ defaultText: 'Default status',
+ id: 'basic-statusbar',
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text', ' ', ' ']
+ })
+ });
+
+/*
+ * ================ Right-aligned StatusBar example =======================
+ */
+ new Ext.Panel({
+ title: 'Right-aligned StatusBar',
+ renderTo: 'right-aligned',
+ width: 350,
+ height: 100,
+ bodyStyle: 'padding:10px;',
+ items:[{
+ xtype: 'button',
+ id: 'right-button',
+ text: 'Do Loading',
+ handler: loadFn.createCallback('right-button', 'right-statusbar')
+ }],
+ bbar: new Ext.ux.StatusBar({
+ defaultText: 'Default status',
+ id: 'right-statusbar',
+ statusAlign: 'right', // the magic config
+ items: [{
+ text: 'A Button'
+ }, '-', 'Plain Text', ' ', ' ']
+ })
+ });
+
+/*
+ * ================ StatusBar Window example =======================
+ */
+ var win = new Ext.Window({
+ title: 'StatusBar Window',
+ width: 400,
+ minWidth: 350,
+ height: 150,
+ modal: true,
+ closeAction: 'hide',
+ bodyStyle: 'padding:10px;',
+ items:[{
+ xtype: 'button',
+ id: 'win-button',
+ text: 'Do Loading',
+ handler: loadFn.createCallback('win-button', 'win-statusbar')
+ }],
+ bbar: new Ext.ux.StatusBar({
+ id: 'win-statusbar',
+ defaultText: 'Ready',
+ items: [{
+ text: 'A Button'
+ }, '-',
+ new Date().format('n/d/Y'), ' ', ' ', '-', {
+ xtype:'tbsplit',
+ text:'Status Menu',
+ menuAlign: 'br-tr?',
+ menu: new Ext.menu.Menu({
+ items: [{text: 'Item 1'}, {text: 'Item 2'}]
+ })
+ }]
+ })
+ });
+
+ new Ext.Button({
+ text: 'Show Window',
+ renderTo: 'window',
+ handler: function(){
+ win.show();
+ }
+ });
+
+/*
+ * ================ Ext Word Processor example =======================
+ *
+ * The StatusBar used in this example is completely standard. What is
+ * customized are the styles and event handling to make the example a
+ * lot more dynamic and application-oriented.
+ *
+ */
+ // Create these explicitly so we can manipulate them later
+ var wordCount = new Ext.Toolbar.TextItem('Words: 0');
+ var charCount = new Ext.Toolbar.TextItem('Chars: 0');
+ var clock = new Ext.Toolbar.TextItem('');
+
+ new Ext.Panel({
+ title: 'Ext Word Processor',
+ renderTo: 'word-proc',
+ width: 500,
+ autoHeight: true,
+ bodyStyle: 'padding:5px;',
+ layout: 'fit',
+ bbar: new Ext.ux.StatusBar({
+ id: 'word-status',
+ // These are just the standard toolbar TextItems we created above. They get
+ // custom classes below in the render handler which is what gives them their
+ // customized inset appearance.
+ items: [wordCount, ' ', charCount, ' ', clock, ' ']
+ }),
+ items: {
+ xtype: 'textarea',
+ id: 'word-textarea',
+ enableKeyEvents: true,
+ grow: true,
+ growMin: 100,
+ growMax: 200,
+ listeners: {
+ // After each keypress update the word and character count text items
+ 'keypress': {
+ fn: function(t){
+ var v = t.getValue(),
+ wc = 0, cc = v.length ? v.length : 0;
+
+ if(cc > 0){
+ wc = v.match(/\b/g);
+ wc = wc ? wc.length / 2 : 0;
+ }
+ Ext.fly(wordCount.getEl()).update('Words: '+wc);
+ Ext.fly(charCount.getEl()).update('Chars: '+cc);
+ },
+ buffer: 1 // buffer to allow the value to update first
+ }
+ }
+ },
+ listeners: {
+ render: {
+ fn: function(){
+ // Add a class to the parent TD of each text item so we can give them some custom inset box
+ // styling. Also, since we are using a greedy spacer, we have to add a block level element
+ // into each text TD in order to give them a fixed width (TextItems are spans). Insert a
+ // spacer div into each TD using createChild() so that we can give it a width in CSS.
+ Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
+ Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
+ Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'});
+
+ // Kick off the clock timer that updates the clock el every second:
+ Ext.TaskMgr.start({
+ run: function(){
+ Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
+ },
+ interval: 1000
+ });
+ },
+ delay: 100
+ }
+ }
+ });
+
+ // This sets up a fake auto-save function. It monitors keyboard activity and after no typing
+ // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.
+ // After a fake delay so that you can see the save activity it will update again to indicate
+ // that the action succeeded.
+ Ext.fly('word-textarea').on('keypress', function(){
+ var sb = Ext.getCmp('word-status');
+ sb.showBusy('Saving draft...');
+ (function(){
+ sb.setStatus({
+ iconCls: 'x-status-saved',
+ text: 'Draft auto-saved at ' + new Date().format('g:i:s A')
+ });
+ }).defer(4000);
+ }, this, {buffer:1500});
+
+});