-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
/**
* @class Ext.ux.StatusBar
* <p>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
+ * supporting the standard {@link Ext.toolbar.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.</p>
* <pre><code>
-new Ext.Panel({
+Ext.create('Ext.Panel', {
title: 'StatusBar',
// etc.
- bbar: new Ext.ux.StatusBar({
+ bbar: Ext.create('Ext.ux.StatusBar', {
id: 'my-status',
// defaults to use when the status is cleared:
sb.clearStatus(); // once completeed
</code></pre>
- * @extends Ext.Toolbar
+ * @extends Ext.toolbar.Toolbar
* @constructor
* Creates a new StatusBar
* @param {Object/Array} config A config object
*/
-Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
+Ext.define('Ext.ux.statusbar.StatusBar', {
+ extend: 'Ext.toolbar.Toolbar',
+ alternateClassName: 'Ext.ux.StatusBar',
+ alias: 'widget.statusbar',
+ requires: ['Ext.toolbar.TextItem'],
/**
* @cfg {String} statusAlign
* The alignment of the status element within the overall StatusBar layout. When the StatusBar is rendered,
* <pre><code>
// Create a left-aligned status bar containing a button,
// separator and text item that will be right-aligned (default):
-new Ext.Panel({
+Ext.create('Ext.Panel', {
title: 'StatusBar',
// etc.
- bbar: new Ext.ux.StatusBar({
+ bbar: Ext.create('Ext.ux.StatusBar', {
defaultText: 'Default status text',
id: 'status-id',
items: [{
// 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({
+Ext.create('Ext.Panel', {
title: 'StatusBar',
// etc.
- bbar: new Ext.ux.StatusBar({
+ bbar: Ext.create('Ext.ux.StatusBar', {
defaultText: 'Default status text',
id: 'status-id',
statusAlign: 'right',
}
// Setting a default icon:
-var sb = new Ext.ux.StatusBar({
+var sb = Ext.create('Ext.ux.StatusBar', {
defaultIconCls: 'x-status-custom'
});
// private
initComponent : function(){
- if(this.statusAlign=='right'){
+ if (this.statusAlign === 'right') {
this.cls += ' x-status-right';
}
- Ext.ux.StatusBar.superclass.initComponent.call(this);
+ this.callParent(arguments);
},
// private
afterRender : function(){
- Ext.ux.StatusBar.superclass.afterRender.call(this);
+ this.callParent(arguments);
- var right = this.statusAlign == 'right';
+ var right = this.statusAlign === 'right';
this.currIconCls = this.iconCls || this.defaultIconCls;
- this.statusEl = new Ext.Toolbar.TextItem({
+ this.statusEl = Ext.create('Ext.toolbar.TextItem', {
cls: 'x-status-text ' + (this.currIconCls || ''),
text: this.text || this.defaultText || ''
});
- if(right){
+ if (right) {
this.add('->');
this.add(this.statusEl);
- }else{
+ } else {
this.insert(0, this.statusEl);
this.insert(1, '->');
}
+ this.height = 27;
this.doLayout();
},
</code></pre>
* @return {Ext.ux.StatusBar} this
*/
- setStatus : function(o){
+ setStatus : function(o) {
o = o || {};
- if(typeof o == 'string'){
+ if (Ext.isString(o)) {
o = {text:o};
}
- if(o.text !== undefined){
+ if (o.text !== undefined) {
this.setText(o.text);
}
- if(o.iconCls !== undefined){
+ if (o.iconCls !== undefined) {
this.setIcon(o.iconCls);
}
- if(o.clear){
+ if (o.clear) {
var c = o.clear,
wait = this.autoClear,
defaults = {useDefaults: true, anim: true};
- if(typeof c == 'object'){
+ if (Ext.isObject(c)) {
c = Ext.applyIf(c, defaults);
- if(c.wait){
+ if (c.wait) {
wait = c.wait;
}
- }else if(typeof c == 'number'){
+ } else if (Ext.isNumber(c)) {
wait = c;
c = defaults;
- }else if(typeof c == 'boolean'){
+ } else if (Ext.isBoolean(c)) {
c = defaults;
}
c.threadId = this.activeThreadId;
- this.clearStatus.defer(wait, this, [c]);
+ Ext.defer(this.clearStatus, wait, this, [c]);
}
+ this.doLayout();
return this;
},
* </ul>
* @return {Ext.ux.StatusBar} this
*/
- clearStatus : function(o){
+ clearStatus : function(o) {
o = o || {};
- if(o.threadId && o.threadId !== this.activeThreadId){
+ 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.
var text = o.useDefaults ? this.defaultText : this.emptyText,
iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
- if(o.anim){
- // animate the statusEl Ext.Element
- this.statusEl.el.fadeOut({
+ if (o.anim) {
+ // animate the statusEl Ext.core.Element
+ this.statusEl.el.puff({
remove: false,
useDisplay: true,
scope: this,
callback: function(){
this.setStatus({
- text: text,
- iconCls: iconCls
- });
+ text: text,
+ iconCls: iconCls
+ });
this.statusEl.el.show();
}
});
- }else{
+ } else {
// hide/show the el to avoid jumpy text or icon
- this.statusEl.hide();
- this.setStatus({
- text: text,
- iconCls: iconCls
- });
- this.statusEl.show();
+ this.statusEl.hide();
+ this.setStatus({
+ text: text,
+ iconCls: iconCls
+ });
+ this.statusEl.show();
}
+ this.doLayout();
return this;
},
setText : function(text){
this.activeThreadId++;
this.text = text || '';
- if(this.rendered){
+ if (this.rendered) {
this.statusEl.setText(this.text);
}
return this;
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{
+ if (this.rendered) {
+ if (this.currIconCls) {
+ this.statusEl.removeCls(this.currIconCls);
+ this.currIconCls = null;
+ }
+ if (cls.length > 0) {
+ this.statusEl.addCls(cls);
+ this.currIconCls = cls;
+ }
+ } else {
this.currIconCls = cls;
}
return this;
* @return {Ext.ux.StatusBar} this
*/
showBusy : function(o){
- if(typeof o == 'string'){
- o = {text:o};
+ if (Ext.isString(o)) {
+ o = { text: o };
}
o = Ext.applyIf(o || {}, {
text: this.busyText,
return this.setStatus(o);
}
});
-Ext.reg('statusbar', Ext.ux.StatusBar);
git.ithinksw.org / extjs.git / blobdiff