How to disable TAB in masked elements

[santosr666]

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.

[mitchellsimoens]

Stop the event... here is a simple example:


function cancelTab(e) {
e.stopEvent();
}

new Ext.form.Panel({
renderTo : document.body,
items : [
{
xtype : 'textfield',
fieldLabel : 'Test'
},
{
xtype : 'textfield',
fieldLabel : 'Test2'
},
{
xtype : 'textfield',
fieldLabel : 'Test3'
},
{
xtype : 'button',
text : 'Disable TAB',
handler : function (btn) {
var form = btn.up('form');

form.el.on('keydown', cancelTab, form);
}
},
{
xtype : 'button',
text : 'Enable TAB',
handler : function (btn) {
var form = btn.up('form');

form.el.un('keydown', cancelTab, form);
}
}
]
});

[santosr666]

Well, it is a nice approach indeed.

But I would still need to go to all forms in the page which are not the current one and the disable also help me out with a mask requirement I had.

Thanks for replying. This has been added as another tool in my toolbox.

Cheers.