📄 statusbar.js
字号:
* 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:<ul>
* <li><tt>text</tt> {String} : (optional) The status text to display. If not specified, any current
* status text will remain unchanged.</li>
* <li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see
* {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.</li>
* <li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
* automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
* specified, the new status will not be auto-cleared and will stay until updated again or cleared using
* {@link #clearStatus}. If <tt>true</tt> is passed, the status will be cleared using {@link #autoClear},
* {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
* it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
* All other options will be defaulted as with the boolean option. To customize any other options,
* you can pass an object in the format:<ul>
* <li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing
* (defaults to {@link #autoClear}).</li>
* <li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback
* executes (defaults to true which fades the status out).</li>
* <li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
* (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).</li>
* </ul></li></ul>
* Example usage:<pre><code>
// 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
}
});
</code></pre>
* @return {Ext.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:<ul>
* <li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
* to false which clears immediately).</li>
* <li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and
* {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).</li>
* </ul>
* @return {Ext.StatusBar} this
*/
clearStatus : function(o){
o = o || {};
if(o.threadId && o.threadId !== this.activeThreadId){
// this means the current call was made internally, but a newer
// thread has set a message since this call was deferred. Since
// we don't want to overwrite a newer message just ignore.
return this;
}
var text = o.useDefaults ? this.defaultText : '',
iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
if(o.anim){
this.statusEl.fadeOut({
remove: false,
useDisplay: true,
scope: this,
callback: function(){
this.setStatus({
text: text,
iconCls: iconCls
});
this.statusEl.show();
}
});
}else{
// hide/show the el to avoid jumpy text or icon
this.statusEl.hide();
this.setStatus({
text: text,
iconCls: iconCls
});
this.statusEl.show();
}
return this;
},
/**
* Convenience method for setting the status text directly. For more flexible options see {@link #setStatus}.
* @param {String} text (optional) The text to set (defaults to '')
* @return {Ext.StatusBar} this
*/
setText : function(text){
this.activeThreadId++;
this.text = text || '';
if(this.rendered){
this.statusEl.update(this.text);
}
return this;
},
/**
* Returns the current status text.
* @return {String} The status text
*/
getText : function(){
return this.text;
},
/**
* Convenience method for setting the status icon directly. For more flexible options see {@link #setStatus}.
* See {@link #iconCls} for complete details about customizing the icon.
* @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
* @return {Ext.StatusBar} this
*/
setIcon : function(cls){
this.activeThreadId++;
cls = cls || '';
if(this.rendered){
if(this.currIconCls){
this.statusEl.removeClass(this.currIconCls);
this.currIconCls = null;
}
if(cls.length > 0){
this.statusEl.addClass(cls);
this.currIconCls = cls;
}
}else{
this.currIconCls = cls;
}
return this;
},
/**
* Convenience method for setting the status text and icon to special values that are pre-configured to indicate
* a "busy" state, usually for loading or processing activities.
* @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
* string to use as the status text (in which case all other options for setStatus will be defaulted). Use the
* <tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default {@link #busyText}
* and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
* {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
* @return {Ext.StatusBar} this
*/
showBusy : function(o){
if(typeof o == 'string'){
o = {text:o};
}
o = Ext.applyIf(o || {}, {
text: this.busyText,
iconCls: this.busyIconCls
});
return this.setStatus(o);
}
});
Ext.reg('statusbar', Ext.StatusBar);
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -