PDA

View Full Version : [INFO REQ] 3.0.0 - disable tab containing a form



mschwartz
14 Oct 2009, 6:05 AM
I spent about 5 hours yesterday debugging what appeared to be an IE issue. Instead it was some last minute change I had made that had undesired effects.

Specifically, I have a form in a tab. The Q/A guys tell me they want the tab disabled during the ajax post of the form contents. They don't want any of the buttons in the form to be pressed or the close box on the tab to be clickable during the request.

So I did something like tab.disable() and it appeared to work fine in FF, though I'm wondering why and how.

You see, when I finally got to the cause of the problem debugging in IE (IE is a nightmare in every respect), the problem was that tab.disable() actually disabled all the form fields. Disabled form fields are not submitted to the server, per HTML spec.

I post this to alert anyone of this potential problem and hope it saves them 5 hours of debugging I went through. And to question whether this should be the expected behavior of tab.disable().

tab.disable() already puts a mask over the panel so the fields aren't accessible and the close box can't be clicked. It didn't need to go to the extra effort of disabling form fields, too.

I ended up masking the whole UI (viewport), but I don't think that's a good thing for desktop type applications where you want to mask/disable just a window or dialog.
~o)

mjlecomte
18 Oct 2009, 8:59 AM
I'm moving this to help since you're apparently trying to help others (and since a bug report hasn't been posted per posting guidelines).

Animal
18 Oct 2009, 9:41 AM
When you say "tab.disable" what do you mean?

Because there's no such thing as a tab. What were you actually disabling? And wouldn't masking be more appropriate?

Animal
18 Oct 2009, 9:44 AM
Little bit of digging shows up that FormPanel's onDisable template method disables all the items in its managed form.



onDisable : function(){
Ext.FormPanel.superclass.onDisable.call(this);
if(this.form){
this.form.items.each(function(){
this.disable();
});
}
},

mschwartz
18 Oct 2009, 12:33 PM
When you say "tab.disable" what do you mean?

Because there's no such thing as a tab. What were you actually disabling? And wouldn't masking be more appropriate?

Masking?

I want to mask the tab (closebox disabled, can't switch to tab) and the form, but not disable the form.

Assume the tab panel is in the center of a border layout and the rest of the UI should not be masked.

There is such thing as a tab, it's a panel, but it's still a tab:



var tabPanel = new Ext.TabPanel({
...
});
var tab = tabPanel.add({
...
});

// in submit handler:
tab.disable();
tab.getForm().submit({
...
success: function() {
tab.enable();
}
});

Animal
18 Oct 2009, 12:44 PM
There is no such thing as a Tab. There isn't. Really not.

What you are accessing is the FormPanel which you placed into the TabPanel.

So you are disabling the FormPanel which as I said disables all its Fields.

You want to disable switching to the tab?

Add a temporary mousedown and click listener pair to the tab item.

http://www.extjs.com/deploy/dev/docs/?class=Ext.TabPanel&member=getTabEl which stops the events. That should prevent closing. But once you have that item you could do anything. Hide the close tool, whatever you like.

mschwartz
18 Oct 2009, 12:48 PM
There is no such thing as a Tab. There isn't. Really not.

What you are accessing is the FormPanel which you placed into the TabPanel.

So you are disabling the FormPanel which as I said disables all its Fields.

You want to disable switching to the tab?

Add a temporary mousedown and click listener pair to the tab item.

http://www.extjs.com/deploy/dev/docs/?class=Ext.TabPanel&member=getTabEl which stops the events. That should prevent closing. But once you have that item you could do anything. Hide the close tool, whatever you like.

It's more complicated than that.

The form is dynamically generated, and it may or may not have a variety of buttons that need to be disabled.

Masking the whole UI is what I ended up doing, but I still think it's questionable that the form fields should be disabled if you disable the panel.

Animal
18 Oct 2009, 11:23 PM
You could easily configure it with



onDisable: Ext.emptyFn,


Or you could just call



Ext.fly(myTabPanel.getTabEl(myFormPanel)).mask();
myFormPanel.mask()


To mask the FormPanel and its selector element. It's all solvable.