Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: 1.1b2 transform Select to Combobox -- tabindex is lost

  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    71
    Vote Rating
    1
      0  

    Default 1.1b2 transform Select to Combobox -- tabindex is lost

    If I create an HTML select field and then use Ext.form.Combobox along with the transform config option, the transformed combobox doesn't retain the tabindex value that was applied to my original select field.

    I can see that it's creating some new input fields based on the select field I identified, would it be possible to enhance the Combobox code so that the tabindex is transferred along with the other values that it copies? In the meantime can anyone suggest a workaround for this problem?

    Thanks,

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    There is a tabIndex config option for the combobox.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    71
    Vote Rating
    1
      0  

    Default

    Hi Jack,

    Thanks for the quick reply. I tried this out today but couldn't get it to work. I'm transforming my HTML select field into a combobox as follows:

    var fldTestForm_Combo1 = new Ext.form.ComboBox({
    transform : 'TestForm_Combo1',
    triggerAction : 'all',
    typeAhead : true,
    width : 128,
    tabIndex : 1
    });

    However the tab index on the resulting combobox is still not set, and when I examine the HTML that was been produced using FireBug, there's no sign of any tabindex attribute being added to any of the combobox elements.

    Am I doing something wrong?

    Thanks in advance,

  4. #4
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    did some digging and indeed the tabIndex config doesn't work for the ComboBox.
    it only works for dynamically created Ext.form.Fields.

    here's the current code for the 1.1-beta2 onRender() method in Ext.form.Field
    Code:
    onRender : function(ct, position) {
      Ext.form.Field.superclass.onRender.call(this, ct, position);
      if (!this.el) { // <== this.el is always defined when transforming existing markup into Ext.form.Fields
        // so this block never gets called (and it shouldn't) when transforming markup
        var cfg = this.getAutoCreate();
        if (!cfg.name) {
          cfg.name = this.name || this.id;
        }
        if (this.inputType) {
          cfg.type = this.inputType;
        }
        if (this.tabIndex !== undefined) {
          cfg.tabIndex = this.tabIndex;
        }
        this.el = ct.createChild(cfg, position);
      } // <== end check for non-existence of this.el
      var type = this.el.dom.type;
      if (type) {
        if (type == 'password') {
          type = 'text';
        }
        this.el.addClass('x-form-'+type);
      }
      if (this.readOnly) {
        this.el.dom.readOnly = true;
      }
    
      this.el.addClass([this.fieldClass, this.cls]);
      this.initValue();
    }
    all Ext.form.Fields (except the ComboBox) modify existing markup by adding Ext classes / wrapping Ext <div>s around the original markup, so the original tabIndex attribute and any other existing attributes are preserved.

    the ComboBox is unique because it doesn't modify the <select> field -- it replaces it completely during the "transformation", hence the tabIndex, along with all other custom attributes, are lost during the "transformation" (except for value, text, and name).

    a simple workaround for your case would be to make use of the autoCreate config option, like so
    Code:
    var fldTestForm_Combo1 = new Ext.form.ComboBox({
      transform : 'TestForm_Combo1',
      triggerAction : 'all',
      typeAhead : true,
      width : 128,
      autoCreate: {tag: 'input', type: 'text', size: '24', autocomplete: 'off', tabIndex: '99999'}
    });

  5. #5
    Ext JS Premium Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    71
    Vote Rating
    1
      0  

    Default

    Hi Marc,

    That's the ticket -- using autoCreate it works perfectly -- many thanks!

    Is this something that will be fixed at some stage in the underlying code -- either to preserve the tabindex of the original select field, or to implement the tabIndex config option (or both)?

  6. #6
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    can't say for sure. i'll have to refer you to jack himself

    on a sidenote, i'm not sure if this qualifies as a bug or not, but i'm glad it's working for you now.

  7. #7
    Ext JS Premium Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    71
    Vote Rating
    1
      0  

    Default

    I wasn't sure whether to describe it as a bug or not either, there's nothing in the documentation that says it *should* retain the tab index, but all the other Ext controls I've used retained it perfectly (for the reasons you've detailed above) so it at least seems to be an inconsistency.

    Never mind, time to move on to my project's next challenge now -- thanks once again for your help!

  8. #8
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    i assure you, i do see your point. perhaps you should put this up as a feature request in the prerelease builds / general forum. call it "[Feature request] tabIndex config for ComboBoxes created from markup" or something, and let's see what jack / brian has to say on the issue.

    in the meantime, all the best for your project

  9. #9
    Ext JS Premium Member
    Join Date
    Jul 2007
    Location
    UK
    Posts
    71
    Vote Rating
    1
      0  

    Default

    Request posted.

  10. #10
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    I made a change for the next release that will correct this issue.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •