JavaScript DHTML/Ext JS/StatusBar
Содержание
Add a StatusBar to a window
<source lang="html4strict">
<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>
StatusBar Examples
Here are several examples of using and customizing the Ext.ux.StatusBar component.
Note that the js is not minified so it is readable. See <a href="statusbar-demo.js">statusbar-demo.js</a>.
Basic StatusBar
This is a simple StatusBar with a few standard Toolbar items included.
Right-Aligned StatusBar
<p>This is a simple StatusBar that has the status element right-aligned. Any StatusBar items will be added inexactly the same order on the left side of the bar.
Status Window
You can add a StatusBar to a window in exactly the same way.
Customizing the Look and Feel
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.
</body> </html>
</source>
A simple StatusBar with a few standard Toolbar items included
<source lang="html4strict">
<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>
StatusBar Examples
Here are several examples of using and customizing the Ext.ux.StatusBar component.
Note that the js is not minified so it is readable. See <a href="statusbar-demo.js">statusbar-demo.js</a>.
Basic StatusBar
This is a simple StatusBar with a few standard Toolbar items included.
Right-Aligned StatusBar
<p>This is a simple StatusBar that has the status element right-aligned. Any StatusBar items will be added inexactly the same order on the left side of the bar.
Status Window
You can add a StatusBar to a window in exactly the same way.
Customizing the Look and Feel
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.
</body> </html>
</source>
Customizing the Look and Feel
<source lang="html4strict">
<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>
StatusBar Examples
Here are several examples of using and customizing the Ext.ux.StatusBar component.
Note that the js is not minified so it is readable. See <a href="statusbar-demo.js">statusbar-demo.js</a>.
Basic StatusBar
This is a simple StatusBar with a few standard Toolbar items included.
Right-Aligned StatusBar
<p>This is a simple StatusBar that has the status element right-aligned. Any StatusBar items will be added inexactly the same order on the left side of the bar.
Status Window
You can add a StatusBar to a window in exactly the same way.
Customizing the Look and Feel
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.
</body> </html>
</source>
Right-Aligned StatusBar
<source lang="html4strict">
<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>
StatusBar Examples
Here are several examples of using and customizing the Ext.ux.StatusBar component.
Note that the js is not minified so it is readable. See <a href="statusbar-demo.js">statusbar-demo.js</a>.
Basic StatusBar
This is a simple StatusBar with a few standard Toolbar items included.
Right-Aligned StatusBar
<p>This is a simple StatusBar that has the status element right-aligned. Any StatusBar items will be added inexactly the same order on the left side of the bar.
Status Window
You can add a StatusBar to a window in exactly the same way.
Customizing the Look and Feel
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.
</body> </html>
</source>
Statusbar with validation
<source lang="html4strict">
<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 = "
- ";
this.errors.each(function(err){
msg += ("
- <a href="#">" + err.msg + "</a> ");
}, this);this.getMsgEl().update(msg+"");
}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>
Advanced StatusBar Example
This is an advanced example of customizing a Ext.ux.StatusBar via a plugin.
Note that the js is not minified so it is readable. See <a href="statusbar-advanced.js">statusbar-advanced.js</a>.
Customizing the StatusBar
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:
- The StatusBar syncs in real-time with the valid state of the form as you type
- When the form is invalid, the error status message can be clicked to hide/show a custom error list
- The error list items can be clicked to focus the associated fields
- 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)
</body> </html>
</source>