PDA

View Full Version : [3.0] Ext.ux.StatusBar



mschwartz
15 Apr 2009, 12:07 PM
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
8 May 2009, 5:16 AM
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
11 May 2009, 11:52 AM
Live example or screenshot?

Greetings,

mschwartz
12 May 2009, 4:37 AM
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
12 May 2009, 11:43 PM
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
20 May 2009, 9:27 AM
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
20 May 2009, 9:42 AM
clamour clamour clamour

mjlecomte
20 May 2009, 10:33 AM
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
28 May 2009, 3:01 AM
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
16 Jun 2009, 5:07 PM
any example? I cant make it work...

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

mjlecomte
16 Jun 2009, 6:12 PM
FYI, a 3.x compatible StatusBar was checked into svn today.

koko2589
20 Jun 2009, 9:59 AM
FYI, a 3.x compatible StatusBar was checked into svn today.
wehre to see demo?? ~o)

mjlecomte
20 Jun 2009, 10:28 AM
It's available in svn (http://extjs.com/store/extjs/#support-table).

koko2589
22 Jun 2009, 4:45 AM
It's available in svn (http://extjs.com/store/extjs/#support-table).
do hve svn for free? they say to buy do you wont israeli mony?:))

cherbert
6 Jul 2009, 4:14 PM
The removal of StatusBar seems like a stupid decision. Would it really do much harm to have kept it in the core?

So I see Ext.StatusBar is not even in the API docs now. So then... why is it listed in the Samples pages? And why does it now reference as Ext.ux.StatusBar in the samples source?

So if I understand correctly... Ext.ux is a User Extension right? Yet it is now part of the 3.0 final release? Can I just use it by changing my existing 2.0 apps to reference Ext.ux.StatusBar now?

All very confusing... They should have just left it alone.

brookd
6 Jul 2009, 5:53 PM
ux is the namespace for user extensions. They initially dumped the status bar from the core, but it was later replaced with a ux (user extension) that has the same functionality. You should be able to include the new code and just change one line of code to use the new ux class.

It was dumped to keep the size of the library down which is a good thing. I was upset a little at first two, but I believe the ux version is the same...

kaeptn
8 Jul 2009, 4:36 AM
It was dumped to keep the size of the library down which is a good thing. I was upset a little at first two, but I believe the ux version is the same...

The weight it would have added would have been negligible IMHO.

And UX does not only mean a namespace but more importantly no documentation. So now you must rebuild something with standard methods which formerly was an object by itself with it's own functionality.