Results 1 to 6 of 6

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

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    42
    Vote Rating
    3
      0  

    Exclamation 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 Attached Images

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    9,514
    Vote Rating
    256
      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
      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
    9,514
    Vote Rating
    256
      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
      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
    9,514
    Vote Rating
    256
      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.

Posting Permissions

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