View Full Version : How to disable TAB in masked elements

16 Oct 2012, 5:46 AM
Hi guys,

I have a very common issue and probably some of you have already solve it and can help me :)

I'm dealing with some requirements in my web portal, basically, I have some panels that could be changed to edit mode. So, whenever edit mode is triggered I should mask/disable all elements behind it.

I have worked with spotlight, mask and modal window, but none of them disable the TAB button. So even when elements are somehow masked it is still possible to reach them using TAB.

In the other hand, I still want TAB to be enabled for my panel in edit mode. It is an usability requirement.

This is my first attempt of doing it:

var skipCascadeDisabler = function(disable, skipElementId){

// my parent xtypes that should not be disabled.
var invalidXTypes = ['tpage', 'panel', 'tabpanel'];

// disable/enable function which will skip my edit panel and it is child elements.
var fn = function (disable, skipElementId) {

if (this.id == skipElementId){
return false;
else if (this.xtype && invalidXTypes.indexOf(this.xtype) == -1) {
disable ? this.disable(): this.enable();

// My root ViewPort where all my elements are build
var vp = Ext.getCmp('_masterViewPort');

vp.cascade(fn, null, [disable, skipElementId]);

It is not bad indeed, but still need some improvements in how to handle already disabled fields..., but questions are: is this the only direction to go? Is there any other approach? Didn't ExtJs take care about this issue?

Thanks in advance.

17 Oct 2012, 12:55 AM
I think we would probably need some sort of visual aid to help us understand what you are trying to achieve - as sometimes you state you want the tab buttons enabled, then in other scenarios you want these disabled - but we obviously have no idea what these scenarios are! :D

If you could explain what you're trying to achieve, then a better solution might be suggested, rather than going down an overcomplicated route...

17 Oct 2012, 3:46 AM
Piece of cake!

Just go to this ExtJs sample:


(http://docs.sencha.com/ext-js/4-1/#!/example/form/contact-form.html)When you click in the "contact us" button a modal dialog will popup. Now start hit Tab-key and see that you are able to reach and trigger elements external to the dialog. That is what I can't allow in my application, but in the other hand, I still want to use Tab-key in the dialog inner elements.

Hope this helps and thanks for the fast reply. I really need to close this issue! ;-)

17 Oct 2012, 3:58 AM
Ohhhh, you mean the "Tab" key on the keyboard - I was assuming you were meaning an ext tab panel :D

It's a pretty non-standard request - but I would guess the simplest way to achieve this would be to add tabindex="-1" to all elements you don't wish to be tabbed to - but you'd obviously have to dynamically add and remove this depending on when the modal was shown.

i.e. Add/remove tabindex=-1 to all links and form inputs except inside your modal window.


17 Oct 2012, 4:26 AM
Yeah, tab-key, sorry! (own my english...rs)

So, in the end, you're saying my method is ok, right?

And man, thanks for the help!

17 Oct 2012, 5:23 AM
As long as it's working for you, then I guess so! :)

I would personally "cheat", use jQuery and add/remove the tabindex attribute to all <a> and <input> upon showing and hiding your modal - but there's always more than one way to achieve a goal :)