JavaScript DHTML/Ext JS/StatusBar
Содержание
Add a StatusBar to a window
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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.ru
*
* http://extjs.ru/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>
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.ru
* http://www.extjs.ru/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.ru
*
* http://extjs.ru/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>
Customizing the Look and Feel
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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.ru
*
* http://extjs.ru/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>
Right-Aligned StatusBar
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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.ru
*
* http://extjs.ru/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>
Statusbar with validation
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/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 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.ru
*
* http://extjs.ru/license
*/
/**
* @class Ext.ux.ValidationStatus
* A {@link Ext.StatusBar} plugin that provides automatic error notification when the
* associated form contains validation errors.
* @extends Ext.ruponent
* @constructor
* Creates a new ValiationStatus plugin
* @param {Object} config A config object
*/
Ext.ux.ValidationStatus = Ext.extend(Ext.ruponent, {
errorIconCls : "x-status-error",
errorListCls : "x-status-error-list",
validIconCls : "x-status-valid",
showText : "The form has errors (click for details...)",
hideText : "Click again to hide the error list",
submitText : "Saving...",
// private
init : function(sb){
sb.on("render", function(){
this.statusBar = sb;
this.monitor = true;
this.errors = new Ext.util.MixedCollection();
this.listAlign = (sb.statusAlign=="right" ? "br-tr?" : "bl-tl?");
if(this.form){
this.form = Ext.getCmp(this.form).getForm();
this.startMonitoring();
this.form.on("beforeaction", function(f, action){
if(action.type == "submit"){
// Ignore monitoring while submitting otherwise the field validation
// events cause the status message to reset too early
this.monitor = false;
}
}, this);
var startMonitor = function(){
this.monitor = true;
}
this.form.on("actioncomplete", startMonitor, this);
this.form.on("actionfailed", startMonitor, this);
}
}, this, {single:true});
sb.on("afterlayout", function(){
// Grab the statusEl after the first layout.
sb.statusEl.getEl().on("click", this.onStatusClick, this, {buffer:200});
}, this, {single: true});
},
// private
startMonitoring : function(){
this.form.items.each(function(f){
f.on("invalid", this.onFieldValidation, this);
f.on("valid", this.onFieldValidation, this);
}, this);
},
// private
stopMonitoring : function(){
this.form.items.each(function(f){
f.un("invalid", this.onFieldValidation, this);
f.un("valid", this.onFieldValidation, this);
}, this);
},
// private
onDestroy : function(){
this.stopMonitoring();
this.statusBar.statusEl.un("click", this.onStatusClick, this);
Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
},
// private
onFieldValidation : function(f, msg){
if(!this.monitor){
return false;
}
if(msg){
this.errors.add(f.id, {field:f, msg:msg});
}else{
this.errors.removeKey(f.id);
}
this.updateErrorList();
if(this.errors.getCount() > 0){
if(this.statusBar.getText() != this.showText){
this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
}
}else{
this.statusBar.clearStatus().setIcon(this.validIconCls);
}
},
// private
updateErrorList : function(){
if(this.errors.getCount() > 0){
var msg = "<ul>";
this.errors.each(function(err){
msg += ("<li id="x-err-"+ err.field.id +""><a href="#">" + err.msg + "</a></li>");
}, this);
this.getMsgEl().update(msg+"</ul>");
}else{
this.getMsgEl().update("");
}
},
// private
getMsgEl : function(){
if(!this.msgEl){
this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
cls: this.errorListCls+" x-hide-offsets"
}, true);
this.msgEl.on("click", function(e){
var t = e.getTarget("li", 10, true);
if(t){
Ext.getCmp(t.id.split("x-err-")[1]).focus();
this.hideErrors();
}
}, this, {stopEvent:true}); // prevent anchor click navigation
}
return this.msgEl;
},
// private
showErrors : function(){
this.updateErrorList();
this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn("b", {duration:.3, easing:"easeOut"});
this.statusBar.setText(this.hideText);
this.form.getEl().on("click", this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
},
// private
hideErrors : function(){
var el = this.getMsgEl();
if(el.isVisible()){
el.slideOut("b", {duration:.2, easing:"easeIn"});
this.statusBar.setText(this.showText);
}
this.form.getEl().un("click", this.hideErrors, this);
},
// private
onStatusClick : function(){
if(this.getMsgEl().isVisible()){
this.hideErrors();
}else if(this.errors.getCount() > 0){
this.showErrors();
}
}
});
</script>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.ru
*
* http://extjs.ru/license
*/
Ext.QuickTips.init();
Ext.onReady(function(){
var fp = new Ext.FormPanel({
id: "status-form",
renderTo: Ext.getBody(),
labelWidth: 75,
width: 350,
buttonAlign: "right",
border: false,
bodyStyle: "padding:10px 10px 0;",
defaults: {
anchor: "95%",
allowBlank: false,
selectOnFocus: true,
msgTarget: "side"
},
items:[{
xtype: "textfield",
fieldLabel: "Name",
blankText: "Name is required"
},{
xtype: "datefield",
fieldLabel: "Birthdate",
blankText: "Birthdate is required"
}],
buttons: [{
text: "Save",
handler: function(){
if(fp.getForm().isValid()){
var sb = Ext.getCmp("form-statusbar");
sb.showBusy("Saving form...");
fp.getEl().mask();
fp.getForm().submit({
url: "fake.php",
success: function(){
sb.setStatus({
text:"Form saved!",
iconCls:"",
clear: true
});
fp.getEl().unmask();
}
});
}
}
}]
});
new Ext.Panel({
title: "StatusBar with Integrated Form Validation",
renderTo: Ext.getBody(),
width: 350,
autoHeight: true,
layout: "fit",
items: fp,
bbar: new Ext.ux.StatusBar({
id: "form-statusbar",
defaultText: "Ready",
plugins: new Ext.ux.ValidationStatus({form:"status-form"})
})
});
});
</script>
<style>
.list {
list-style-image:none;
list-style-position:outside;
list-style-type:square;
padding-left:16px;
}
.list li {
font-size:11px;
padding:3px;
}
</style>
</head>
<body>
<h1>Advanced StatusBar Example</h1>
<p>This is an advanced example of customizing a Ext.ux.StatusBar via a plugin.</p>
<p>Note that the js is not minified so it is readable. See <a href="statusbar-advanced.js">statusbar-advanced.js</a>.</p>
<h2>Customizing the StatusBar</h2>
<p>The <a href="ValidationStatus.js">ValidationStatus</a> plugin hooks into the StatusBar and automatically
monitors the validation status of any fields in the associated FormPanel. Items of interest:</p>
<ul class="list">
<li>The StatusBar syncs in real-time with the valid state of the form as you type</li>
<li>When the form is invalid, the error status message can be clicked to hide/show a custom error list</li>
<li>The error list items can be clicked to focus the associated fields</li>
<li>After submitting successfully, note that the confirmation status message will fade out after 5
seconds and return to the default status (this is a config option)</li>
</ul><br>
</body>
</html>