PDA

View Full Version : Can someone please confirm tabIndex behavior with Ext.form.field.Base ?



Jean-David Lanz
3 Dec 2012, 10:27 AM
I've been puzzling over the tabIndex config for Ext.form.field.Base. I didn't find much information in the documentation (but then maybe I looked in the wrong place), so I went with trial and error and here's how I understand it now.



Fields where tabIndex is set explicitly with an integer value strictly greater than 0 are ordered by ascending tabIndex. If several fields have been set with the same tabIndex value, they are sub-ordered by creation: the first field created goes first and so on.
Fields where tabIndex is set explicitly with 0, or where tabIndex is not set explicitly, go next, with the same sub-order by creation.
Fields where tabIndex is set exlicitly with an integer value strictly lesser than 0 are out of the order: you cannot reach them with Tab.

(I'll admit that I didn't try to set tabIndex with non-integer values.)

Can someone confirm that this is the way it works, or better yet, point out mistakes or omissions in the above, please ?

mitchellsimoens
5 Dec 2012, 11:37 AM
It is and is how HTML forms work as well.

wapachild
4 Nov 2013, 2:22 PM
I was able to resolve this issue by having the fields in the current form only have values greater 0. So if you have two different forms or windows with tabIndexes on them, it will only tab through your current form...

I created an override for Ext.form.Panel

Ext.override(Ext.form.Panel, {
removeTabIndexes:function(){
var me = this;
if(!me.tabIndexesAreCreated){
return;
}
Ext.each(me.query('field:not(hiddenfield):not(displayfield)'),function(field){
field.inputEl.dom.tabIndex = -1;
});
me.tabIndexesAreCreated=false;
},
createTabIndexes:function(){
var me = this;
if(me.tabIndexesAreCreated){
return;
}
var idx = 1;
Ext.each(me.query('field:not(hiddenfield):not(displayfield)'),function(field){
field.inputEl.dom.tabIndex = field.initialConfig.tabIndex || idx++;
});
me.tabIndexesAreCreated=true;
}
});


and created an override for Ext.form.field.Base


Ext.override(Ext.form.field.Base, {
initComponent:function(){
var me = this;
var getEnclosingForm = function(domEl) {
var el = Ext.get(domEl),
field = el ? el.up('.x-field') : null,
form = field ? Ext.getCmp(field.id).up('form') : null;
};
me.addListener({
focus:function(cmp,evt,opts){
if(cmp.hasNoForm || !cmp.up('form')){
cmp.hasNoForm=true;
return;
}
var currentForm = evt ? getEnclosingForm(evt.currentTarget) : null,
relatedForm = evt ? getEnclosingForm(evt.relatedTarget) : null;
if(currentForm!==relatedForm){
currentForm && currentForm.createTabIndexes();
relatedForm && relatedForm.removeTabIndexes();
}
},
blur:function(cmp,evt,opts){
if(cmp.hasNoForm||!cmp.up('form')){
cmp.hasNoForm=true;
return;
}
var currentForm = evt ? getEnclosingForm(evt.currentTarget) : null,
relatedForm = evt ? getEnclosingForm(evt.relatedTarget) : null;
if(currentForm!==relatedForm){
currentForm && currentForm.removeTabIndexes();
relatedForm && relatedForm.createTabIndexes();
}
}
});
me.callParent();
}
});

rabindra.nitr
3 Dec 2014, 10:19 PM
This work around didn't work for me.
Tested browser Mozilla Version 33.1
Extjs 5.0.1

rabindra.nitr
3 Dec 2014, 10:23 PM
Whenever window modal config set to true. The tab index is not working as well the combo fields takes a lot time to populate the selection list.