+++ /dev/null
-/*\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
git.ithinksw.org / extjs.git / blobdiff