JavaScript DHTML/Ext JS/StatusBar

Материал из Web эксперт
Перейти к: навигация, поиск

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 in
exactly 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 in
exactly 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 in
exactly 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 in
exactly 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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/StatusBar&oldid=2425»