-/*!
- * Ext JS Library 3.2.2
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact: http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
/**
* @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){
+ if (o.anim) {
// animate the statusEl Ext.Element
- this.statusEl.el.fadeOut({
+ 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