X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/StatusBar.html diff --git a/docs/source/StatusBar.html b/docs/source/StatusBar.html new file mode 100644 index 00000000..afc0c188 --- /dev/null +++ b/docs/source/StatusBar.html @@ -0,0 +1,413 @@ + +
+/** + * @class Ext.ux.StatusBar + *Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}. In addition to + * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar + * provides a greedy status element that can be aligned to either side and has convenient methods for setting the + * status text and icon. You can also indicate that something is processing using the {@link #showBusy} method.
+ *Note: Although StatusBar supports xtype:'statusbar', at this time Ext.Toolbar (the base class) does + * not support xtype. For this reason, if you are adding Toolbar items into the StatusBar you must declare it + * using the "new StatusBar()" syntax for the items to render correctly.
+ *+ * @extends Ext.Toolbar + * @constructor + * Creates a new StatusBar + * @param {Object/Array} config A config object + */ +Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, { + /** + * @cfg {String} statusAlign + * 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 + * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* 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: + *+new Ext.Panel({ + title: 'StatusBar', + // etc. + bbar: new Ext.ux.StatusBar({ + id: 'my-status', + + // defaults to use when the status is cleared: + defaultText: 'Default status text', + defaultIconCls: 'default-icon', + + // values to set initially: + text: 'Ready', + iconCls: 'ready-icon', + + // any standard Toolbar items: + items: [{ + text: 'A Button' + }, '-', 'Plain Text'] + }) +}); + +// Update the status bar later in code: +var sb = Ext.getCmp('my-status'); +sb.setStatus({ + text: 'OK', + iconCls: 'ok-icon', + clear: true // auto-clear after a set interval +}); + +// Set the status bar to show that something is processing: +sb.showBusy(); + +// processing.... + +sb.clearStatus(); // once completeed +
+ */ + /** + * @cfg {String} defaultText + * The default {@link #text} value. This will be used anytime the status bar is cleared with the + * useDefaults:true option (defaults to ''). + */ + /** + * @cfg {String} defaultIconCls + * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon). + * This will be used anytime the status bar is cleared with the useDefaults:true option (defaults to ''). + */ + /** + * @cfg {String} text + * A string that will be rendered into the status element as the status message (defaults to ''); + */ + /** + * @cfg {String} iconCls + * 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:+// 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.ux.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.ux.StatusBar({ + defaultText: 'Default status text', + id: 'status-id', + statusAlign: 'right', + items: [{ + text: 'A Button' + }, '-', 'Plain Text'] + }) +}); +
+ */ + + /** + * @cfg {String} cls + * The base class applied to the containing element for this component on render (defaults to 'x-statusbar') + */ + cls : 'x-statusbar', + /** + * @cfg {String} busyIconCls + * The default {@link #iconCls} applied when calling {@link #showBusy} (defaults to 'x-status-busy'). It can be + * overridden at any time by passing the iconCls argument into showBusy. See the + * iconCls docs for additional details about customizing the icon. + */ + busyIconCls : 'x-status-busy', + /** + * @cfg {String} busyText + * The default {@link #text} applied when calling {@link #showBusy} (defaults to 'Loading...'). It can be + * overridden at any time by passing the text argument into showBusy. + */ + busyText : 'Loading...', + /** + * @cfg {Number} autoClear + * The number of milliseconds to wait after setting the status via {@link #setStatus} before automatically + * clearing the status text and icon (defaults to 5000). Note that this only applies when passing the + * clear argument to setStatus since that is the only way to defer clearing the status. This can + * be overridden by specifying a different wait value in setStatus. Calls to {@link #clearStatus} + * always clear the status bar immediately and ignore this value. + */ + autoClear : 5000, + + // private + activeThreadId : 0, + + // private + initComponent : function(){ + if(this.statusAlign=='right'){ + this.cls += ' x-status-right'; + } + Ext.ux.StatusBar.superclass.initComponent.call(this); + }, + + // private + afterRender : function(){ + Ext.ux.StatusBar.superclass.afterRender.call(this); + + var right = this.statusAlign == 'right'; + this.statusEl = new Ext.Toolbar.TextItem({ + cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''), + text: this.text || this.defaultText || '' + }); + + if(right){ + this.add('->'); + this.add(this.statusEl); + }else{ + this.insert(0, this.statusEl); + this.insert(1, '->'); + } + +// this.statusEl = td.createChild({ +// cls: 'x-status-text ' + (this.iconCls || this.defaultIconCls || ''), +// html: this.text || this.defaultText || '' +// }); +// this.statusEl.unselectable(); + +// this.spacerEl = td.insertSibling({ +// tag: 'td', +// style: 'width:100%', +// cn: [{cls:'ytb-spacer'}] +// }, right ? 'before' : 'after'); + }, + + /** + * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the + * status that was set after a specified interval. + * @param {Object/String} config A config object specifying what status to set, or a string assumed + * to be the status text (and all other options are defaulted as explained below). A config + * object containing any or all of the following properties can be passed:+// 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.ux.StatusBar({ + defaultIconCls: 'x-status-custom' +}); + +// Setting it in code: +sb.setStatus({ + text: 'New status', + iconCls: 'x-status-custom' +}); +
+// Simple call to update the text
+statusBar.setStatus('New status');
+
+// Set the status and icon, auto-clearing with default options:
+statusBar.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom',
+ clear: true
+});
+
+// Auto-clear with custom options:
+statusBar.setStatus({
+ text: 'New status',
+ iconCls: 'x-status-custom',
+ clear: {
+ wait: 8000,
+ anim: false,
+ useDefaults: false
+ }
+});
+
+ * @return {Ext.ux.StatusBar} this
+ */
+ setStatus : function(o){
+ o = o || {};
+
+ if(typeof o == 'string'){
+ o = {text:o};
+ }
+ if(o.text !== undefined){
+ this.setText(o.text);
+ }
+ if(o.iconCls !== undefined){
+ this.setIcon(o.iconCls);
+ }
+
+ if(o.clear){
+ var c = o.clear,
+ wait = this.autoClear,
+ defaults = {useDefaults: true, anim: true};
+
+ if(typeof c == 'object'){
+ c = Ext.applyIf(c, defaults);
+ if(c.wait){
+ wait = c.wait;
+ }
+ }else if(typeof c == 'number'){
+ wait = c;
+ c = defaults;
+ }else if(typeof c == 'boolean'){
+ c = defaults;
+ }
+
+ c.threadId = this.activeThreadId;
+ this.clearStatus.defer(wait, this, [c]);
+ }
+ return this;
+ },
+
+ /**
+ * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
+ * @param {Object} config (optional) A config object containing any or all of the following properties. If this
+ * object is not specified the status will be cleared using the defaults below: