PDA

View Full Version : StatusBar for fieldset



SabaSarwat
2 Dec 2010, 10:59 PM
Good Morning,

I needed to have a statusbar in my application, to show the status 'loading' when fieldsets are expanding and loading data. For this purpose i used 'Ext.ux.StatusBar'...



var myStatusBar = new Ext.ux.StatusBar({
id: 'basic-statusbar',
text: 'Ready'
});


I used beforeexpand, expand and afterlayout events to show the status, such as



listeners: {
beforeexpand: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.showBusy();
},
expand: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.showBusy();
},
afterlayout: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.setIcon('');
msb.setText('Ready');
}
}


It is working fine for the first time when i expand the fieldset, but when i collapse the fieldset and expand it again, afterlayout event does not occur, so my status continues showing 'loading...'
If i dont use afterlayout event, then beforeexpand and expand events occur so fastly that 'loading...' does not appear at all.
Also, 'loading...' does not show in that time which a fieldset takes to call the beforeexpand event.
Is there any good way of doing it? Can i also change the mouse pointer to show that fieldset is loading?

Waiting,
Saba!

Condor
3 Dec 2010, 3:03 AM
You are performing some kind of loading when expanding the fieldset? Then you should call your 'ready' code in the callback of that loading operation.

SabaSarwat
3 Dec 2010, 3:21 AM
Actually i want the mask or status when the internal components of the fieldset are rendering. They are not loading from somewhere. Actually i have a large number of form components in a fieldset, so it takes a little time in rendering its elements after expand.

Condor
3 Dec 2010, 3:26 AM
OK, but the second time the fieldset expands, the inner components are already rendered, so why do you need an afterlayout event?

I would configure each of these listeners with single:true, so they get removed after they execute.

SabaSarwat
3 Dec 2010, 3:58 AM
I am just using afterlayout to increase the time when mask is showing. If i don't use afterlayout then beforeexpand and expand events occur so quickly that mask doesn't show up at all. But i want to show mask/status.
Kindly tell how to give config in listeners, I did this but it did not work.


listeners: {
config: {
single: true
},
beforeexpand: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.showBusy();
},
expand: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.showBusy();
},
afterlayout: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.setIcon('');
msb.setText('Ready');
}
}

Condor
3 Dec 2010, 4:28 AM
No, the correct syntax is:

listeners: {
beforeexpand: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.showBusy();
},
expand: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.showBusy();
},
afterlayout: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.setIcon('');
msb.setText('Ready');
},
single: true
}

Or, if you have more listeners, that shouldn't be single:true:

listeners: {
beforeexpand: {
fn: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.showBusy();
},
single: true
},
expand: {
fn: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.showBusy();
},
single: true
},
afterlayout: {
fn: function(){
var msb = Ext.getCmp('basic-statusbar');
msb.setIcon('');
msb.setText('Ready');
},
single: true
},
... more listeners
}

SabaSarwat
3 Dec 2010, 4:49 AM
Thanks a lot condor :)
I need a little more help. If i use LoadMask of this kind...


var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();

and want to hide it after a certain interval of time, then what function will i need? There is no method given in docs to set some time interval in Ext.LoadMask. I used this code but it is not working.


setTimeout(function(){
myMask.hide();
}, 250);

Condor
3 Dec 2010, 4:55 AM
I would use:

myMask.hide.defer(250, myMask);
but that is almost the same as your code.

SabaSarwat
3 Dec 2010, 5:14 AM
Thanks :)
One thing more, i want to ask, is there any event which fires when a card in the 'Card layout' loads or when a card changes?

Condor
3 Dec 2010, 5:19 AM
'activate' and 'deactivate' events are fired on the card layout items.

SabaSarwat
3 Dec 2010, 5:22 AM
Thank you, live long :)

SabaSarwat
5 Dec 2010, 9:13 PM
Condor, activate and deactivate events are not firing... I did this.



{
region : 'center',
id : 'card-doctor',
layout:'card',
activeItem: 0,
items: [{
id: 'card-0',
autoScroll: true,
border: false,
bodyStyle : 'padding:10px',
items: A
},{
id: 'card-1',
autoScroll: true,
border: false,
bodyStyle : 'padding:10px',
items: B
},{
id: 'card-2',
border: false,
bodyStyle : 'padding:10px',
autoScroll: true,
items: C
}],
listeners: {
deactivate: function(){
alert('deactivate');
myMask.show();
},
activate: function(){
alert('activate');
myMask.hide.defer(250, myMask);
}
}
}

Condor
5 Dec 2010, 11:47 PM
No, 'activate' and 'deactivate' are card layout item events.

SabaSarwat
7 Dec 2010, 3:22 AM
Condor, this mask is working fine in firefox but when i run it in chrome, it does not hide and also the message 'please wait...' shows on top left corner of the screen. Is that some problem with chrome? how to solve it?
Please help!

Condor
7 Dec 2010, 5:54 AM
What is your code now?

If the "Please wait..." shows up in the upper left corner, then it is shown when the panel has not yet determined it's size.

SabaSarwat
7 Dec 2010, 9:53 PM
I am doing it in fieldsets like this...


var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});

Ext.FieldSet.myFieldSet= Ext.extend(Ext.form.FieldSet, {
bodyStyle : 'padding:10px',
constructor: function(config) {
Ext.FieldSet.myFieldSet.superclass.constructor.apply(this, arguments);
},
initComponent: function() {
Ext.apply(this, {
labelWidth : 250,
labelSeparator : ' ',
defaults : {
align : 'stretch',
anchor : '98%'
},
layout : 'form',
listeners: {
beforeexpand: function(){
myMask.show();
},
expand : function(){
myMask.hide.defer(250, myMask);
}
}
});
Ext.FieldSet.myFieldSet.superclass.initComponent.call(this);
}
});
Ext.reg('fieldsetxtype', Ext.FieldSet.myFieldSet);

Condor
7 Dec 2010, 11:47 PM
Does this actually work? I thought that you can't specify listeners in initComponent and needed to use addListener/on instead.

Masking before expanding will obviously show the mask when the panel doesn't have it's full height yet, so the mask won't be sized correctly and the message won't be correctly centered.

You could try:

afterEffect : function(anim){
Ext.FieldSet.myFieldSet.superclass.afterEffect.call(this, anim);
if (!this.collapsed) {
myMask.show();
}
},
afterExpand : function(anim){
Ext.FieldSet.myFieldSet.superclass.afterExpand.call(this, anim);
myMask.hide();
}
Disclaimer: Completely untested code!