View Full Version : Modal FormPanel & DatePicker & MessageBox, how to manage masks

26 Sep 2011, 9:04 AM
Hi everyone,

I'm having some problems with the following scenario :

I have a nested list which has a detailCard.
When I click the detailCard I pop a FormPanel, now the detailCard is masked.
FormPanel has a DatePicker, so after selecting a value with the picker I return to the FormPanel but the mask is gone.
Also when I show a Messabox from the FormPanel I can still click the FormPanel without dismissing the MessageBox.

So I the basic question is, when you show a FormPanel as modal and you have another component which hides the mask on hide, is there a way to manage the mask so it only hides when you close the form?

Thanks for any ideas.

21 Oct 2011, 3:33 AM
I've a similar problem. It seems that as per the picker shows as modal, when the element is picked, the picker hides any mask. I've been looking for picker events to handle that, but no luckily yet, so, if you have the answer, please update this thread.

Update: [Solution found]

Just add a listener to the hide "method" of the picker and do what you need to restore the mask.

xtype: 'datepickerfield',
name: 'date',
label: 'Date',
picker: {
listeners: {
hide: function() {
// Prevent mask hide default behavior of picker hide event.

Tks, Milton.

23 Oct 2011, 7:43 AM
How we can handle the mask? Any hint would be great help.

24 Oct 2011, 2:54 AM
Hi Priya, just add a global variable for masking at app level like

name: 'MyApp',
launch: function(){
this.mask = new Ext.LoadMask(Ext.getBody(), {});

then, you can use following methods to show/hide a loading panel mask...



24 Oct 2011, 4:43 AM
It didn't work for me as well.
Is there anyway I can attach a handler like (afterrender, aftershow, show) to the Ext.messagebox ? If yes, any hint is really appreciate.

I tried to attach hide handler, which works perfectly but the above handlers are not working (may be I am not doing right..)

Let me know if you want my code snippet.

24 Oct 2011, 5:34 AM
Do you need to show or hide mask while messagebox is showed ? not sure what you want to do :(
Paste a code snippet for better understand.

BTW, please note that mask is a global variable, but you can do the same using the Ext element directly.

24 Oct 2011, 8:36 AM
I want to mask the body while message box is showed. This Message box is little different than other. It validates two datepicker field (like start date and end date). If start date > end date, I want to throw the message box. But what happens is : the body is getting masked when the datepicker comes. Pressing done button hides date picker , unmasked the body followed by the messagebox without body masked.

Hope I am not confusing you..

Message box code


title: langMap.get('Time Validation Error'),

msg: langMap.get('End Time should not be less than Start Time'),

buttons: Ext.MessageBox.OK,

modal: true,

fn:function() {

Ext.query("*[name="+endTimeFieldName+"]")[0].value = EndTimeValue;

26 Oct 2011, 4:26 AM
Ok, I understand what you mean. Seems like the hide mask of picker prevents the mask of message. I guess that this comes because of timing, rather than events error. ie. hide of picker runs after your validation that shows message.
Not sure how when you do the validation, but I suggest the following options:
1- Validate before picker hides (change).

xtype: 'datepickerfield'
,listeners: {
change: function() {
// do your validations.

2- Validate after picker hides (hide), so you can be sure that masking of message will be showed. The code for that is in previous responses.

27 Oct 2011, 1:02 AM
I am doing the validation inside datepicker - change listener only. I think I got the problem, I should not popup the message box inside change listener. I should do it inside datepicker hide listener.

Let me try and will let you know the result. Thanks for the hint.