1. #1
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default [3.0] Ext.ux.StatusBar

    [3.0] Ext.ux.StatusBar


    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.


    Code:
    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
        }
    });

  2. #2
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


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

    Code:
    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:

    Code:
    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;
            }
        };
    };

  3. #3
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Live example or screenshot?

    Greetings,

  4. #4
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    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).
    Attached Images

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    378
    Vote Rating
    2
    silcreval is on a distinguished road

      0  

    Default


    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).

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2007
    Posts
    256
    Vote Rating
    1
    brookd is on a distinguished road

      0  

    Default What happened to Ext.StatusBar?

    What happened to Ext.StatusBar?


    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?

  7. #7
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    clamour clamour clamour

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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...

  9. #9
    Sencha User
    Join Date
    Jan 2008
    Location
    Romania
    Posts
    23
    Vote Rating
    0
    chriss is on a distinguished road

      0  

    Default


    Here is my code for the StatusBar for Ext 3.0


    Code:
    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
    Code:
    .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;
    }

  10. #10
    Ext User
    Join Date
    Dec 2008
    Posts
    32
    Vote Rating
    0
    dragnovich is on a distinguished road

      0  

    Default


    any example? I cant make it work...

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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar