A simple StatusBar with a few standard Toolbar items included
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/StatusBar.js"> </script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/StatusBar.css" />
<script type="text/javascript">
/*
* 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});
});
</script>
</head>
<body>
<h1>StatusBar Examples</h1>
<p>Here are several examples of using and customizing the Ext.ux.StatusBar component.</p>
<p>Note that the js is not minified so it is readable. See <a href="statusbar-demo.js">statusbar-demo.js</a>.</p>
<h2>Basic StatusBar</h2>
<p>This is a simple StatusBar with a few standard Toolbar items included.</p>
<div id="basic"></div>
<p>
<h2>Right-Aligned StatusBar</h2>
<p>This is a simple StatusBar that has the status element right-aligned. Any StatusBar items will be added in
exactly the same order on the left side of the bar.</p>
<div id="right-aligned"></div>
<h2>Status Window</h2>
<p>You can add a StatusBar to a window in exactly the same way.</p>
<div id="window" style="margin-bottom:20px;"></div>
<h2>Customizing the Look and Feel</h2>
<p>This is a standard StatusBar with some custom CSS styles applied and some event handling in place to
handle the TextArea's keypress events. Notice that after you've stopped typing for a few seconds a
simulated auto-save process will begin.</p>
<div id="word-proc"></div>
</body>
</html>
| 1. | Right-Aligned StatusBar | ||
| 2. | Add a StatusBar to a window | ||
| 3. | Statusbar with validation | ||
| 4. | Customizing the Look and Feel |