Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / source / widgets / StatusBar.js
diff --git a/source/widgets/StatusBar.js b/source/widgets/StatusBar.js
deleted file mode 100644 (file)
index 41a7e04..0000000
+++ /dev/null
@@ -1,406 +0,0 @@
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-/**\r
- * @class Ext.StatusBar\r
- * <p>Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}.  In addition to\r
- * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar\r
- * provides a greedy status element that can be aligned to either side and has convenient methods for setting the\r
- * status text and icon.  You can also indicate that something is processing using the {@link #showBusy} method.</p>\r
- * <p><b>Note:</b> Although StatusBar supports xtype:'statusbar', at this time Ext.Toolbar (the base class) does\r
- * not support xtype.  For this reason, if you are adding Toolbar items into the StatusBar you must declare it\r
- * using the "new StatusBar()" syntax for the items to render correctly.</p> \r
- * <pre><code>\r
-new Ext.Panel({\r
-    title: 'StatusBar',\r
-    // etc.\r
-    bbar: new Ext.StatusBar({\r
-        id: 'my-status',\r
-        \r
-        // defaults to use when the status is cleared:\r
-        defaultText: 'Default status text',\r
-        defaultIconCls: 'default-icon',\r
-        \r
-        // values to set initially:\r
-        text: 'Ready',\r
-        iconCls: 'ready-icon',\r
-        \r
-        // any standard Toolbar items:\r
-        items: [{\r
-            text: 'A Button'\r
-        }, '-', 'Plain Text']\r
-    })\r
-});\r
-\r
-// Update the status bar later in code:\r
-var sb = Ext.getCmp('my-status');\r
-sb.setStatus({\r
-    text: 'OK',\r
-    iconCls: 'ok-icon',\r
-    clear: true // auto-clear after a set interval\r
-});\r
-\r
-// Set the status bar to show that something is processing:\r
-sb.showBusy();\r
-\r
-// processing....\r
\r
-sb.clearStatus(); // once completeed\r
-</code></pre>\r
- * @extends Ext.Toolbar\r
- * @constructor\r
- * Creates a new StatusBar\r
- * @param {Object/Array} config A config object\r
- */\r
-Ext.StatusBar = Ext.extend(Ext.Toolbar, {\r
-    /**\r
-     * @cfg {String} statusAlign\r
-     * The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,\r
-     * it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the\r
-     * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be\r
-     * rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically\r
-     * expand to take up all sapce left over by any other items.  Example usage:\r
-     * <pre><code>\r
-// Create a left-aligned status bar containing a button,\r
-// separator and text item that will be right-aligned (default):\r
-new Ext.Panel({\r
-    title: 'StatusBar',\r
-    // etc.\r
-    bbar: new Ext.StatusBar({\r
-        defaultText: 'Default status text',\r
-        id: 'status-id',\r
-        items: [{\r
-            text: 'A Button'\r
-        }, '-', 'Plain Text']\r
-    })\r
-});\r
-\r
-// By adding the statusAlign config, this will create the\r
-// exact same toolbar, except the status and toolbar item\r
-// layout will be reversed from the previous example:\r
-new Ext.Panel({\r
-    title: 'StatusBar',\r
-    // etc.\r
-    bbar: new Ext.StatusBar({\r
-        defaultText: 'Default status text',\r
-        id: 'status-id',\r
-        statusAlign: 'right',\r
-        items: [{\r
-            text: 'A Button'\r
-        }, '-', 'Plain Text']\r
-    })\r
-});\r
-</code></pre>\r
-     */\r
-    /**\r
-     * @cfg {String} defaultText\r
-     * The default {@link #text} value.  This will be used anytime the status bar is cleared with the \r
-     * <tt>useDefaults:true</tt> option (defaults to '').\r
-     */\r
-    /**\r
-     * @cfg {String} defaultIconCls\r
-     * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).  \r
-     * This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').\r
-     */\r
-    /**\r
-     * @cfg {String} text\r
-     * A string that will be rendered into the status element as the status message (defaults to '');\r
-     */\r
-    /**\r
-     * @cfg {String} iconCls\r
-     * A CSS class that will be applied to the status element and is expected to provide a background image that will\r
-     * serve as the status bar icon (defaults to '').  The class is applied directly to the div that also contains the\r
-     * status text, so the rule should provide the appropriate padding on the div to make room for the image. \r
-     * Example usage:<pre><code>\r
-// Example CSS rule:\r
-.x-statusbar .x-status-custom {\r
-    padding-left: 25px;\r
-    background: transparent url(images/custom-icon.gif) no-repeat 3px 3px;\r
-}\r
-\r
-// Initializing the status bar:\r
-var sb = new Ext.StatusBar({\r
-    defaultIconCls: 'x-status-custom'\r
-});\r
-\r
-// Setting it in code:\r
-sb.setStatus({\r
-    text: 'New status',\r
-    iconCls: 'x-status-custom'\r
-});\r
-</code></pre>\r
-     */\r
-    \r
-    /**\r
-     * @cfg {String} cls\r
-     * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')\r
-     */\r
-    cls : 'x-statusbar',\r
-    /**\r
-     * @cfg {String} busyIconCls\r
-     * The default {@link #iconCls} applied when calling {@link #showBusy} (defaults to 'x-status-busy'). It can be\r
-     * overridden at any time by passing the <tt>iconCls</tt> argument into <tt>showBusy</tt>. See the \r
-     * iconCls docs for additional details about customizing the icon.\r
-     */\r
-    busyIconCls : 'x-status-busy',\r
-    /**\r
-     * @cfg {String} busyText\r
-     * The default {@link #text} applied when calling {@link #showBusy} (defaults to 'Loading...'). It can be\r
-     * overridden at any time by passing the <tt>text</tt> argument into <tt>showBusy</tt>.\r
-     */\r
-    busyText : 'Loading...',\r
-    /**\r
-     * @cfg {Number} autoClear\r
-     * The number of milliseconds to wait after setting the status via {@link #setStatus} before automatically\r
-     * clearing the status text and icon (defaults to 5000).  Note that this only applies when passing the \r
-     * <tt>clear</tt> argument to setStatus since that is the only way to defer clearing the status.  This can\r
-     * be overridden by specifying a different <tt>wait</tt> value in setStatus. Calls to {@link #clearStatus} \r
-     * always clear the status bar immediately and ignore this value.\r
-     */\r
-    autoClear : 5000,\r
-    \r
-    // private\r
-    activeThreadId : 0,\r
-    \r
-    // private\r
-    initComponent : function(){\r
-        if(this.statusAlign=='right'){\r
-            this.cls += ' x-status-right';\r
-        }\r
-        Ext.StatusBar.superclass.initComponent.call(this);\r
-    },\r
-    \r
-    // private\r
-    afterRender : function(){\r
-        Ext.StatusBar.superclass.afterRender.call(this);\r
-        \r
-        var right = this.statusAlign=='right',\r
-            td = Ext.get(this.nextBlock());\r
-        \r
-        if(right){\r
-            this.tr.appendChild(td.dom);\r
-        }else{\r
-            td.insertBefore(this.tr.firstChild);\r
-        }\r
-        \r
-        this.statusEl = td.createChild({\r
-            cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''),\r
-            html: this.text || this.defaultText || ''\r
-        });\r
-        this.statusEl.unselectable();\r
-        \r
-        this.spacerEl = td.insertSibling({\r
-            tag: 'td',\r
-            style: 'width:100%',\r
-            cn: [{cls:'ytb-spacer'}]\r
-        }, right ? 'before' : 'after');\r
-    },\r
-\r
-    /**\r
-     * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the \r
-     * status that was set after a specified interval.\r
-     * @param {Object/String} config A config object specifying what status to set, or a string assumed \r
-     * to be the status text (and all other options are defaulted as explained below). A config\r
-     * object containing any or all of the following properties can be passed:<ul>\r
-     * <li><tt>text</tt> {String} : (optional) The status text to display.  If not specified, any current \r
-     * status text will remain unchanged.</li>\r
-     * <li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see \r
-     * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.</li>\r
-     * <li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will \r
-     * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not \r
-     * specified, the new status will not be auto-cleared and will stay until updated again or cleared using \r
-     * {@link #clearStatus}. If <tt>true</tt> is passed, the status will be cleared using {@link #autoClear}, \r
-     * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed, \r
-     * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value. \r
-     * All other options will be defaulted as with the boolean option.  To customize any other options, \r
-     * you can pass an object in the format:<ul>\r
-     *    <li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing \r
-     *    (defaults to {@link #autoClear}).</li>\r
-     *    <li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback \r
-     *    executes (defaults to true which fades the status out).</li>\r
-     *    <li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls\r
-     *    (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).</li>\r
-     * </ul></li></ul>\r
-     * Example usage:<pre><code>\r
-// Simple call to update the text\r
-statusBar.setStatus('New status');\r
-\r
-// Set the status and icon, auto-clearing with default options:\r
-statusBar.setStatus({\r
-    text: 'New status',\r
-    iconCls: 'x-status-custom',\r
-    clear: true\r
-});\r
-\r
-// Auto-clear with custom options:\r
-statusBar.setStatus({\r
-    text: 'New status',\r
-    iconCls: 'x-status-custom',\r
-    clear: {\r
-        wait: 8000,\r
-        anim: false,\r
-        useDefaults: false\r
-    }\r
-});\r
-</code></pre>\r
-     * @return {Ext.StatusBar} this\r
-     */\r
-    setStatus : function(o){\r
-        o = o || {};\r
-        \r
-        if(typeof o == 'string'){\r
-            o = {text:o};\r
-        }\r
-        if(o.text !== undefined){\r
-            this.setText(o.text);\r
-        }\r
-        if(o.iconCls !== undefined){\r
-            this.setIcon(o.iconCls);\r
-        }\r
-        \r
-        if(o.clear){\r
-            var c = o.clear,\r
-                wait = this.autoClear,\r
-                defaults = {useDefaults: true, anim: true};\r
-            \r
-            if(typeof c == 'object'){\r
-                c = Ext.applyIf(c, defaults);\r
-                if(c.wait){\r
-                    wait = c.wait;\r
-                }\r
-            }else if(typeof c == 'number'){\r
-                wait = c;\r
-                c = defaults;\r
-            }else if(typeof c == 'boolean'){\r
-                c = defaults;\r
-            }\r
-            \r
-            c.threadId = this.activeThreadId;\r
-            this.clearStatus.defer(wait, this, [c]);\r
-        }\r
-        return this;\r
-    },\r
-     \r
-    /**\r
-     * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.\r
-     * @param {Object} config (optional) A config object containing any or all of the following properties.  If this \r
-     * object is not specified the status will be cleared using the defaults below:<ul>\r
-     * <li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults\r
-     * to false which clears immediately).</li>\r
-     * <li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and \r
-     * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).</li>\r
-     * </ul>\r
-     * @return {Ext.StatusBar} this\r
-     */\r
-    clearStatus : function(o){\r
-        o = o || {};\r
-        \r
-        if(o.threadId && o.threadId !== this.activeThreadId){\r
-            // this means the current call was made internally, but a newer\r
-            // thread has set a message since this call was deferred.  Since\r
-            // we don't want to overwrite a newer message just ignore.\r
-            return this;\r
-        }\r
-        \r
-        var text = o.useDefaults ? this.defaultText : '',\r
-            iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';\r
-            \r
-        if(o.anim){\r
-            this.statusEl.fadeOut({\r
-                remove: false,\r
-                useDisplay: true,\r
-                scope: this,\r
-                callback: function(){\r
-                    this.setStatus({\r
-                           text: text, \r
-                           iconCls: iconCls\r
-                       });\r
-                    this.statusEl.show();\r
-                }\r
-            });\r
-        }else{\r
-            // hide/show the el to avoid jumpy text or icon\r
-            this.statusEl.hide();\r
-               this.setStatus({\r
-                   text: text,\r
-                   iconCls: iconCls\r
-               });\r
-            this.statusEl.show();\r
-        }\r
-        return this;\r
-    },\r
-    \r
-    /**\r
-     * Convenience method for setting the status text directly.  For more flexible options see {@link #setStatus}.\r
-     * @param {String} text (optional) The text to set (defaults to '')\r
-     * @return {Ext.StatusBar} this\r
-     */\r
-    setText : function(text){\r
-        this.activeThreadId++;\r
-        this.text = text || '';\r
-        if(this.rendered){\r
-            this.statusEl.update(this.text);\r
-        }\r
-        return this;\r
-    },\r
-    \r
-    /**\r
-     * Returns the current status text.\r
-     * @return {String} The status text\r
-     */\r
-    getText : function(){\r
-        return this.text;\r
-    },\r
-\r
-    /**\r
-     * Convenience method for setting the status icon directly.  For more flexible options see {@link #setStatus}.\r
-     * See {@link #iconCls} for complete details about customizing the icon.\r
-     * @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)\r
-     * @return {Ext.StatusBar} this\r
-     */\r
-    setIcon : function(cls){\r
-        this.activeThreadId++;\r
-        cls = cls || '';\r
-        \r
-        if(this.rendered){\r
-               if(this.currIconCls){\r
-                   this.statusEl.removeClass(this.currIconCls);\r
-                   this.currIconCls = null;\r
-               }\r
-               if(cls.length > 0){\r
-                   this.statusEl.addClass(cls);\r
-                   this.currIconCls = cls;\r
-               }\r
-        }else{\r
-            this.currIconCls = cls;\r
-        }\r
-        return this;\r
-    },\r
-    \r
-    /**\r
-     * Convenience method for setting the status text and icon to special values that are pre-configured to indicate\r
-     * a "busy" state, usually for loading or processing activities.\r
-     * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a\r
-     * string to use as the status text (in which case all other options for setStatus will be defaulted).  Use the \r
-     * <tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default {@link #busyText} \r
-     * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and \r
-     * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.\r
-     * @return {Ext.StatusBar} this\r
-     */\r
-    showBusy : function(o){\r
-        if(typeof o == 'string'){\r
-            o = {text:o};\r
-        }\r
-        o = Ext.applyIf(o || {}, {\r
-            text: this.busyText,\r
-            iconCls: this.busyIconCls\r
-        });\r
-        return this.setStatus(o);\r
-    }\r
-});\r
-Ext.reg('statusbar', Ext.StatusBar);\r