You found a bug! We've classified it as EXTJS-11069 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    42
    Vote Rating
    3
    rajindarr is on a distinguished road

      0  

    Exclamation KeyBoard Navigation - When Date Field is the last filed in a fieldset

    KeyBoard Navigation - When Date Field is the last filed in a fieldset


    When we placed the datefield as the last field in a fieldset 'Keyboard Navigation' using "TAB" is not Navigating to the field in fieldset. But as per the extjs focusmanager keyboard navigation should navigate inside the fieldset.

    *EDIT BY Gary Schlosberg: Tested in 4.2.1
    Fiddle: https://fiddle.sencha.com/#fiddle/ch
    In test case, focus should stay within the fieldset when tabbing from last field. Rearranging date field to middle position illustrates the difference.
    Attached Images

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,831
    Vote Rating
    72
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    I'm unable to reproduce this problem. I've attached a fiddle test case that looks like yours and works as you expected.



    Perhaps you can submit a test case that reproduces the issue.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    42
    Vote Rating
    3
    rajindarr is on a distinguished road

      0  

    Exclamation


    The Screen given in your example is matched with our screen.

    Here if you enable the FocusManager, the tab flow will be different from the current tab flow.

    can you please enable the focusmanager to see the tabflow.


    Example 1
    Ext.require('*');
    Ext.onReady(function() {
    Ext.FocusManager.enable(true);
    var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
    "abbr": "AL",
    "name": "Alabama"
    }, {
    "abbr": "AK",
    "name": "Alaska"
    }, {
    "abbr": "AZ",
    "name": "Arizona"
    }]
    });
    Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,
    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',
    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
    anchor: '100%'
    },
    // The fields
    defaultType: 'textfield',
    items: [{
    xtype: 'fieldset',
    columnWidth: 0.5,
    title: 'Quick Search',
    collapsible: true,
    defaultType: 'textfield',
    defaults: {
    anchor: '100%'
    },
    layout: 'anchor',
    items: [{
    fieldLabel: 'SSN',
    name: 'ssn',
    allowBlank: false
    }]
    }, {
    xtype: 'fieldset',
    columnWidth: 0.5,
    title: 'Advanced Search',
    collapsible: true,
    defaultType: 'textfield',
    defaults: {
    anchor: '100%'
    },
    layout: 'anchor',
    items: [{
    fieldLabel: 'First',
    name: 'first',
    allowBlank: false
    }, {
    fieldLabel: 'Last',
    name: 'last',
    allowBlank: false
    }, {
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: 'Birth',
    name: 'birth',
    maxValue: new Date() // limited to the current date or prior
    }],
    }],
    // Reset and Submit buttons
    buttons: [{
    text: 'Reset',
    handler: function() {
    this.up('form').getForm().reset();
    }
    }, {
    text: 'Submit',
    formBind: true, //only enabled once the form is valid
    disabled: true,
    handler: function() {
    var form = this.up('form').getForm();
    if (form.isValid()) {
    form.submit({
    success: function(form, action) {
    Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
    Ext.Msg.alert('Failed', action.result.msg);
    }
    });
    }
    }
    }],
    renderTo: Ext.getBody()
    });
    });


    Example 2



    Ext.require('*');
    Ext.onReady(function() {
    Ext.FocusManager.enable(true);
    var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
    "abbr": "AL",
    "name": "Alabama"
    }, {
    "abbr": "AK",
    "name": "Alaska"
    }, {
    "abbr": "AZ",
    "name": "Arizona"
    }]
    });
    Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,
    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',
    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
    anchor: '100%'
    },
    // The fields
    defaultType: 'textfield',
    items: [{
    xtype: 'fieldset',
    columnWidth: 0.5,
    title: 'Quick Search',
    collapsible: true,
    defaultType: 'textfield',
    defaults: {
    anchor: '100%'
    },
    layout: 'anchor',
    items: [{
    fieldLabel: 'SSN',
    name: 'ssn',
    allowBlank: false
    }]
    }, {
    xtype: 'fieldset',
    columnWidth: 0.5,
    title: 'Advanced Search',
    collapsible: true,
    defaultType: 'textfield',
    defaults: {
    anchor: '100%'
    },
    layout: 'anchor',
    items: [{
    fieldLabel: 'First',
    name: 'first',
    allowBlank: false
    }, {
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: 'Birth',
    name: 'birth',
    maxValue: new Date() // limited to the current date or prior
    }, {
    fieldLabel: 'Last',
    name: 'last',
    allowBlank: false
    }],
    }],
    // Reset and Submit buttons
    buttons: [{
    text: 'Reset',
    handler: function() {
    this.up('form').getForm().reset();
    }
    }, {
    text: 'Submit',
    formBind: true, //only enabled once the form is valid
    disabled: true,
    handler: function() {
    var form = this.up('form').getForm();
    if (form.isValid()) {
    form.submit({
    success: function(form, action) {
    Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
    Ext.Msg.alert('Failed', action.result.msg);
    }
    });
    }
    }
    }],
    renderTo: Ext.getBody()
    });
    });

  4. #4
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,831
    Vote Rating
    72
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    I still don't see the behavior you describe. Here's a fiddle with the focus manager code you added:



    Does this code exhibit the issue for you?

  5. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    42
    Vote Rating
    3
    rajindarr is on a distinguished road

      0  

    Default


    Gary Schlosberg , I moved the datefield between the text fields now the tabs flow will different from your example.

    In my previous post i posted two examples example 1 and 2 are different code samples to test this.


    Sencha Fiddle - Ext JS 4 and Sencha Touch 2 Fiddler.jpg

    Can you please see test the below code, we can see the different tabs flow, on blur of 'last' Tab Flow will return to first, but if the last field is trigger field tab flow will not return to 'first'

    Ext.require('*');


    Ext.onReady(function() {


    Ext.FocusManager.enable(true);
    Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,


    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',


    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
    anchor: '100%'
    },


    // The fields
    defaultType: 'textfield',
    items: [{
    xtype: 'fieldset',
    columnWidth: 0.5,
    title: 'Quick Search',
    collapsible: true,
    defaultType: 'textfield',
    defaults: {
    anchor: '100%'
    },
    layout: 'anchor',
    items: [{
    fieldLabel: 'SSN',
    name: 'ssn',
    allowBlank: false
    }]
    }, {
    xtype: 'fieldset',
    columnWidth: 0.5,
    title: 'Advanced Search',
    collapsible: true,
    defaultType: 'textfield',
    defaults: {
    anchor: '100%'
    },
    layout: 'anchor',
    items: [{
    fieldLabel: 'First',
    name: 'first',
    allowBlank: false
    }, {
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: 'Birth',
    name: 'birth',
    maxValue: new Date() // limited to the current date or prior
    }, {
    fieldLabel: 'Last',
    name: 'last',
    allowBlank: false
    }],
    }],


    // Reset and Submit buttons
    buttons: [{
    text: 'Reset',
    handler: function() {
    this.up('form').getForm().reset();
    }
    }, {
    text: 'Submit',
    formBind: true, //only enabled once the form is valid
    disabled: true,
    handler: function() {
    var form = this.up('form').getForm();
    if (form.isValid()) {
    form.submit({
    success: function(form, action) {
    Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
    Ext.Msg.alert('Failed', action.result.msg);
    }
    });
    }
    }
    }],
    renderTo: Ext.getBody()
    });
    });

  6. #6
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,831
    Vote Rating
    72
    Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough Gary Schlosberg is a jewel in the rough

      0  

    Default


    Apologies, I misunderstood what you were describing. Thanks for your patience, and thanks for the report. I have opened a bug in our bug tracker.

Thread Participants: 1