ext.statusbar.html

Ext中文API,学习ext的同志只要你学会ext里的一种控件后其实其他的就大同小异了

<!--
Mock
<link rel="stylesheet" type="text/css" href="http://localhost/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/docs.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/style.css"/>
-->
<style type="text/css">
    body {
        overflow: scroll;
    }
    /**
	 .mdesc .long {
        display: block;
    }
     */
</style>
<!-- End Mock-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div class="body-wrap">
    <div class="top-tools">
        <a class="inner-link" href="#Ext.StatusBar-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.StatusBar-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.StatusBar-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.StatusBar-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.StatusBar"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a>
    </div><h1>Class Ext.StatusBar</h1>
    <table cellspacing="0">
        <!--
        <tr>
        <td class="label">
        Package:
        </td>
        <td class="hd-info">
        </td>
        </tr>
        -->
        <tr>
            <td class="label">
                Defined In:
            </td>
            <td class="hd-info">
                StatusBar.js
            </td>
        </tr>
        <tr>
            <td class="label">
                Class:
            </td>
            <td class="hd-info">
                Ext.StatusBar
            </td>
        </tr>
        <tr>
            <td class="label">
                Extends:
            </td>
            <td class="hd-info">
                Ext.Toolbar
            </td>
        </tr>
    </table>
    <div class="description">
        
    </div>
    <div class="hr">
    </div>
    <a id="Ext.StatusBar-configs"></a>
    <h2>配置项</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">
                    配置项
                </th>
                <th class="msource-header">
                    定义者
                </th>
            </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="statusAlign-header"></a>
                        <b>statusAlign</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                The alignment of the status element... 
                            </div>
                            <div class="long">
                                The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered, it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the methods, will be rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically expand to take up all sapce left over by any other items.  Example usage: <pre><code>
// Create a left-aligned status bar containing a button,
// separator and text item that will be right-aligned (default):
new Ext.Panel({
    title: 'StatusBar',
    // etc.
    bbar: new Ext.StatusBar({
        defaultText: 'Default status text',
        id: 'status-id',
        items: [{
            text: 'A Button'
        }, '-', 'Plain Text']
    })
});

// By adding the statusAlign config, this will create the
// exact same toolbar, except the status and toolbar item
// layout will be reversed from the previous example:
new Ext.Panel({
    title: 'StatusBar',
    // etc.
    bbar: new Ext.StatusBar({
        defaultText: 'Default status text',
        id: 'status-id',
        statusAlign: 'right',
        items: [{
            text: 'A Button'
        }, '-', 'Plain Text']
    })
});
</code></pre> 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            StatusBar
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="defaultText-header"></a>
                        <b>defaultText</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                The default {@link #text} value.  T... 
                            </div>
                            <div class="long">
                                The default {@link #text} value.  This will be used anytime the status bar is cleared with the  <tt>useDefaults:true</tt> option (defaults to ''). 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            StatusBar
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="defaultIconCls-header"></a>
                        <b>defaultIconCls</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                The default #iconCls value (see the... 
                            </div>
                            <div class="long">
                                The default <a href="###" onClick="alert('#iconCls');">#iconCls</a> value (see the iconCls docs for additional details about customizing the icon).   This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to ''). 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            StatusBar
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="text-header"></a>
                        <b>text</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                A string that will be rendered into... 
                            </div>
                            <div class="long">
                                A string that will be rendered into the status element as the status message (defaults to ''); 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            StatusBar
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="iconCls-header"></a>
                        <b>iconCls</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                A CSS class that will be applied to... 
                            </div>
                            <div class="long">
                                A CSS class that will be applied to the status element and is expected to provide a background image that will serve as the status bar icon (defaults to '').  The class is applied directly to the div that also contains the status text, so the rule should provide the appropriate padding on the div to make room for the image.  Example usage:<pre><code>
// Example CSS rule:
.x-statusbar .x-status-custom {
    padding-left: 25px;
    background: transparent url(images/custom-icon.gif) no-repeat 3px 3px;
}

// Initializing the status bar:
var sb = new Ext.StatusBar({
    defaultIconCls: 'x-status-custom'
});

// Setting it in code:
sb.setStatus({
    text: 'New status',
    iconCls: 'x-status-custom'
});
</code></pre> 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            StatusBar
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="cls-header"></a>
                        <b>cls</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                The base class applied to the conta... 
                            </div>
                            <div class="long">
                                The base class applied to the containing element for this component on render (defaults to 'x-statusbar') 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                        
                            StatusBar
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">