[3.0] Ext.ux.StatusBar

[mschwartz]

It's not perfect, but satisfies my needs. It should be a fine starting point to hack on yourself to make it do what subset of the 2.2 Ext.StatusBar you used.

It's certainly missing the iconCls kind of functionality.

Ext.namespace('Ext.ux');

Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
    textId: '',
    defaultText: '',
    autoClear: 5000,
    initComponent: function() {
        this.textId = Ext.id();
        this.defaultText = this.initialConfig.defaultText || '';
        var text = this.initialConfig.text || this.defaultText;
        
        var config = {
            items: [
                '<span id="'+this.textId+'">'+text+'</span>',    // status text
                '->'                            // make it greedy
            ]
        };
        if (this.initialConfig.items) {
            config.items = config.items.concat(this.initialConfig.items);
            delete this.initialConfig.items;
        }
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        Ext.ux.StatusBar.superclass.initComponent.apply(this, arguments);
    },
    onRender: function() {
        Ext.ux.StatusBar.superclass.onRender.apply(this, arguments);
    },
    setText: function(text) {
        var el = Ext.get(this.textId);
        el.update(text);
    },
    setStatus: function(config) {
        var defaults = {
            clear: {
                wait: this.autoClear,
                anim: true,
                useDefaults: true
            }
        };
        
        if (config.clear === true) {
            delete config.clear;
        }
        if (!Ext.isArray(config)) {
            config = {
                text: config.text || ''
            }
        }
        Ext.apply(config, defaults);
        var el = Ext.get(this.textId);
        el.update(config.text);
        var clear = config.clear;
        var defaultText = this.defaultText;
        if (clear.wait) {
            (function() {
                el.fadeOut({
                    callback: function() {
                        el.update(defaultText);
                        el.show();
                    },
                    duration: 1
                });
            }).defer(clear.wait);
        }
    },
    clearStatus: function() {
        this.setText(this.defaultText);
    },
    showBusy: function(msg) {
        // stub for now
    }
});

[mschwartz]

Updated version, using Ext.ux.DelayedTask (which is now in SVN as Ext.util.DelayedTask):

Ext.namespace('Ext.ux');

Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
    textId: '',
    defaultText: '',
    autoClear: 5000,
    task: null,
    initComponent: function() {
        this.textId = Ext.id();
        this.defaultText = this.initialConfig.defaultText || '';
        var text = this.initialConfig.text || this.defaultText;
        
        var config = {
            items: [
                '<span id="'+this.textId+'">'+text+'</span>',    // status text
                '->'                            // make it greedy
            ]
        };
        if (this.initialConfig.items) {
            config.items = config.items.concat(this.initialConfig.items);
            delete this.initialConfig.items;
        }
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        Ext.ux.StatusBar.superclass.initComponent.apply(this, arguments);
        this.task = new Ext.ux.DelayedTask(function() {
            var el = Ext.get(this.textId);
            var defaultText = this.defaultText;
            el.fadeOut({
                callback: function() {
                    el.update(defaultText);
                    el.show();
                },
                duration: 1
            });
        }, this);
    },
    onRender: function() {
        Ext.ux.StatusBar.superclass.onRender.apply(this, arguments);
    },
    setText: function(text) {
        var el = Ext.get(this.textId);
        el.update(text);
    },
    setStatus: function(config) {
        var defaults = {
            clear: {
                wait: this.autoClear,
                anim: true,
                useDefaults: true
            }
        };
        
        if (config.clear === true) {
            delete config.clear;
        }
        if (!Ext.isArray(config)) {
            config = {
                text: config.text || ''
            }
        }
        Ext.apply(config, defaults);
        var el = Ext.get(this.textId);
        el.update(config.text);
        var clear = config.clear;
        var defaultText = this.defaultText;
        if (clear.wait) {
            this.task.delay(clear.wait);
        }
        else {
            this.task.cancel();
        }
    },
    clearStatus: function() {
        this.setText(this.defaultText);
        this.task.cancel();
    },
    showBusy: function(msg) {
        // stub for now
    }
});

And here's Ext.ux.DelayedTask:

Ext.ux.DelayedTask = function(fn, scope, args) {
    var id = null;
    var call = function() {
        id = null;
        fn.apply(scope, args || []);
    };
    this.delay = function(delay, newFn, newScope, newArgs) {
        if (id) {
            this.cancel();
        }
        fn = newFn || fn;
        scope = newScope || scope;
        args = newArgs || args;
        if (!id) {
            id = setTimeout(call, delay);
        }
    };
    this.cancel = function() {
        if (id) {
            clearTimeout(id);
            id = null;
        }
    };
};

[galdaka]

Live example or screenshot?

Greetings,

[mschwartz]

Attached snapshot.

It's basically an extended Toolbar, where you can post status messages to the left of the buttons.

See the 2.2 docs for Ext.StatusBar for functionality. As I said, I didn't implement the iconCls functionality, so you can't add an image to the status bar message or show a loading indicator. For my purposes, you can setText('<img src=...> status text to be displayed') and achieve the same result, and I use other things for loading indicator (like loadMask).

[silcreval]

The ux.StatusBar seems to be a little thinner (<height) than the
Ext2 StatusBar, you might want to increasse the default height
a little? This seems to be when you add a status bar with no
additional fields (just for text messages).

[brookd]

I haven't upgraded to 3.0 yet. I am using the statusBar in 2.2. Does this mean the statusbar no longer works in 3.0? Can't the 2.0 statusbar (Ext.StatusBar) code be used directly in 3.0, or it needs to be re-written as you have done here.

I guess what I want to understand, is WHY does it need to be rewritten. What changed?

[mschwartz]

clamour clamour clamour

[mjlecomte]

StatusBar is no longer supported. Search forums, there must be at least 6 threads about this.

Toolbar changed to container is one change off top of my head. But do a diff and you'll see that the old StatusBar class will no longer work from 2.x days.

I haven't examined this class to any detail, but my thought from another thread was not to have StatusBar (based on Toolbar), but maybe StatusPanel, StatusBox, StatusField or some other class that could be more easily plopped in the UI somewhere. At any rate, not sure if there's a benefit to using Toolbar as a base class...

[chriss]

Here is my code for the StatusBar for Ext 3.0

Ext.StatusBar = Ext.extend(Ext.Toolbar, {

    cls : 'x-statusbar',

    busyIconCls : 'x-status-busy',

    busyText : 'Loading...',
 
    autoClear : 5000,
    
    // private
    activeThreadId : 0,
    
    // private
    initComponent : function(){
        if(this.statusAlign=='right'){
            this.cls += ' x-status-right';
        }
        Ext.StatusBar.superclass.initComponent.call(this);
    },
    
    // private
    afterRender : function(){
        Ext.StatusBar.superclass.afterRender.call(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;
    },
     

    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;
    },
    

    setText : function(text){
        this.activeThreadId++;
        this.text = text || '';
        if(this.rendered){
            this.statusEl.update(this.text);
        }
        return this;
    },
    

    getText : function(){
        return this.text;
    },


    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;
    },
    

    showBusy : function(o){
        if(typeof o == 'string'){
            o = {text:o};
        }
        o = Ext.applyIf(o || {}, {
            text: this.busyText,
            iconCls: this.busyIconCls
        });
        return this.setStatus(o);
    },

    
    nextBlock : function(){
        var td = document.createElement("td");
        this.tr.appendChild(td);
        return td;
    },
    
    onRender : function(ct, position){
        if(!this.el){
            if(!this.autoCreate){
                this.autoCreate = {
                    cls: this.toolbarCls + ' x-small-editor'
                }
            }
            this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
        }
        
        
    },
    
    onLayout: function(ct, target){
        Ext.StatusBar.superclass.onLayout.call(this, ct, target);
        
        
        if( !this.tr ){
            this.tr = this.getLayout().leftTr
            
            var right = this.statusAlign=='right',
                td = Ext.get(this.nextBlock());
            if(right){
                this.getLayout().rightTr.appendChild(td.dom);
            }else{
                td.insertBefore(this.tr.firstChild);
            }
            
            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');
        }
        

    }
});
Ext.reg('statusbar', Ext.StatusBar);

The css is the same one from the old version

.x-statusbar .x-status-text {
    height: 21px;
    line-height: 21px;
    padding: 0 4px;
    cursor: default;
}
.x-statusbar .x-status-busy {
    padding-left: 25px;
    background: transparent url(../images/default/grid/loading.gif) no-repeat 3px 3px;
}
.x-statusbar .x-status-text-panel {
    border-top: 1px solid #99BBE8;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #99BBE8;
    padding: 2px 8px 2px 5px;
}

[dragnovich]

any example? I cant make it work...

Im triying to append it to my south pannel but nothing happens...