Customizing the Look and Feel : StatusBar « Ext JS « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » Ext JS » StatusBar 
Customizing the Look and Feel
   

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
   <script type="text/javascript" src="ext-3.0.0/examples/ux/StatusBar.js"> </script>
   <link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/StatusBar.css" />
   <script type="text/javascript">
/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */
Ext.onReady(function(){

    // This is a shared function that simulates a load action on a StatusBar.
    // It is reused by most of the example panels.
    var loadFn = function(btn, statusBar){
        btn = Ext.getCmp(btn);
        statusBar = Ext.getCmp(statusBar);

        btn.disable();
        statusBar.showBusy();

        (function(){
            statusBar.clearStatus({useDefaults:true});
            btn.enable();
        }).defer(2000);
    };

/*
 *  Basic StatusBar example  
 */
    new Ext.Panel({
        title: 'Basic StatusBar',
        renderTo: 'basic',
        width: 350,
        height: 100,
        bodyStyle: 'padding:10px;',
        items:[{
            xtype: 'button',
            id: 'basic-button',
            text: 'Do Loading',
            handler: loadFn.createCallback('basic-button', 'basic-statusbar')
        }],
        bbar: new Ext.ux.StatusBar({
            defaultText: 'Default status',
            id: 'basic-statusbar',
          items: [{
              text: 'A Button'
          }'-''Plain Text', ' '' ']
        })
    });

/*
 *  Right-aligned StatusBar example  
 */
    new Ext.Panel({
        title: 'Right-aligned StatusBar',
        renderTo: 'right-aligned',
        width: 350,
        height: 100,
        bodyStyle: 'padding:10px;',
        items:[{
            xtype: 'button',
            id: 'right-button',
            text: 'Do Loading',
            handler: loadFn.createCallback('right-button', 'right-statusbar')
        }],
        bbar: new Ext.ux.StatusBar({
            defaultText: 'Default status',
            id: 'right-statusbar',
            statusAlign: 'right', // the magic config
            items: [{
                text: 'A Button'
            }'-''Plain Text', ' '' ']
        })
    });

/*
 *   StatusBar Window example   */
    var win = new Ext.Window({
        title: 'StatusBar Window',
        width: 400,
        minWidth: 350,
        height: 150,
        modal: true,
        closeAction: 'hide',
        bodyStyle: 'padding:10px;',
        items:[{
            xtype: 'button',
            id: 'win-button',
            text: 'Do Loading',
            handler: loadFn.createCallback('win-button', 'win-statusbar')
        }],
        bbar: new Ext.ux.StatusBar({
            id: 'win-statusbar',
            defaultText: 'Ready',
            items: [{
                text: 'A Button'
            }'-',
            new Date().format('n/d/Y'), ' '' ''-'{
                xtype:'tbsplit',
                text:'Status Menu',
                menuAlign: 'br-tr?',
                menu: new Ext.menu.Menu({
                    items: [{text: 'Item 1'}, {text: 'Item 2'}]
                })
            }]
        })
    });

    new Ext.Button({
        text: 'Show Window',
        renderTo: 'window',
        handler: function(){
            win.show();
        }
    });

/*
 *   Ext Word Processor example  
 *
 * The StatusBar used in this example is completely standard.  What is
 * customized are the styles and event handling to make the example a
 * lot more dynamic and application-oriented.
 *
 */
    // Create these explicitly so we can manipulate them later
    var wordCount = new Ext.Toolbar.TextItem('Words: 0');
    var charCount = new Ext.Toolbar.TextItem('Chars: 0');
    var clock = new Ext.Toolbar.TextItem('');

    new Ext.Panel({
        title: 'Ext Word Processor',
        renderTo: 'word-proc',
        width: 500,
        autoHeight: true,
        bodyStyle: 'padding:5px;',
        layout: 'fit',
        bbar: new Ext.ux.StatusBar({
            id: 'word-status',
            // These are just the standard toolbar TextItems we created above.  They get
            // custom classes below in the render handler which is what gives them their
            // customized inset appearance.
            items: [wordCount, ' ', charCount, ' ', clock, ' ']
        }),
        items: {
            xtype: 'textarea',
            id: 'word-textarea',
            enableKeyEvents: true,
            grow: true,
            growMin: 100,
            growMax: 200,
            listeners: {
                // After each keypress update the word and character count text items
                'keypress': {
                    fn: function(t){
                        var v = t.getValue(),
                            wc = 0, cc = v.length ? v.length : 0;

                        if(cc > 0){
                            wc = v.match(/\b/g);
                            wc = wc ? wc.length / 0;
                        }
                      Ext.fly(wordCount.getEl()).update('Words: '+wc);
                        Ext.fly(charCount.getEl()).update('Chars: '+cc);
                  },
                    buffer: // 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>

   
    
    
  
Related examples in the same category
1. A simple StatusBar with a few standard Toolbar items included
2. Right-Aligned StatusBar
3. Add a StatusBar to a window
4. Statusbar with validation
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.