PDA

View Full Version : Converted select/combobox and tabindex



dbadke
26 Mar 2007, 1:50 PM
If a select element in a form is converted to a combobox, a new input text field is created for the combobox body, a new hidden input field with the same ID as the select is created, and the original select field is deleted. However, the tabindex attribute of the select element is not copied to the new combobox body element, so tab order in the form is messed up.

For example, this HTML:


<div class="x-form-item">
<select tabindex="30" name="user-group" id="user-group">
<option>...</option>
<option>...</option>
</select>

converted with this Javascript:


new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform: 'user-group',
width: 200,
editable: false,
forceSelection: true
});

produces this final HTML (from Firebug):


<div id="ext-gen421" class="x-form-field-wrap" style="width: 200px;">
<input id="user-group" type="hidden" name="user-group" value="master"/>
<input id="ext-gen420" class="x-form-text x-form-field x-combo-noedit x-form-focus" type="text" autocomplete="off" size="24" style="width: 175px;" readonly="true"/>
../images/blank.gif
</div>

and the tabindex of the combobox input element (ext-gen420) is 0 instead of 30.

The tabindex of the new combox input element should be set to the tabindex of the original select element.

SteveEisner
26 Mar 2007, 3:25 PM
BTW it doesn't exactly relate to your problem, but the same thing happens when you use an editor to create an on-demand combo or date field. I solved it with


editor.on('complete', function(e, value){
//...set values etc. ...
editor.boundEl.focus();
});