1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    DSKK is on a distinguished road

      0  

    Default Unanswered: Not able to focus after onblur event on text field on IE 7 & 8

    Unanswered: Not able to focus after onblur event on text field on IE 7 & 8


    In the onblur function of a field, I am setting the focus on another text field.
    This focus is not working correctly in IE7 & 8.
    Please help, I am using the following to set the focus:

    Ext.getCmp('packing_stn').focus(true);

    I tried delaying the focus to the field both by using set timeout function and delay in focus function (that's the only solution I could find on internet) but it doesn't work. Please help! I have been breaking my head over this for past 2 weeks and it is impacting my deliverables.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,982
    Answers
    661
    Vote Rating
    453
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this will work for you:

    Code:
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
    
        // Fields will be arranged vertically, stretched to full width
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
    
        // The fields
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            itemId: 'firstname',
            listeners: {
                blur: function(field) {
                    var form = field.up('form');
                    form.down('#middlename').focus(true);
                }    
            }    
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Middle Name',
            name: 'middle',
            itemId: 'middlename'
        }],
    
        // Reset and Submit buttons
        buttons: [{
            text: 'Submit',
            formBind: true, //only enabled once the form is valid
            disabled: true
        }],
        renderTo: Ext.getBody(),
            
        listeners: {
            afterlayout: function(form) {
                form.down('#firstname').focus(true);
            
            }
        }        
    });​
    Scott.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    DSKK is on a distinguished road

      0  

    Default


    Thanks for the reply Scott.
    In the following statement:

    var form = field.up('form')
    Where is ID form coming from? Is it an ID of form panel?

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,982
    Answers
    661
    Vote Rating
    453
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    If is grabbing the xtype of the parent of button. If you wanted to be more specific, you could assign an itemId to the form and then then use ('#formItemId') .. named instead of xtype

    In a real world app, you would want to narrow it down. Since I knew I just had 1 form, I just used that.

    Scott.

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    DSKK is on a distinguished road

      0  

    Default


    Scott,

    I tried the way you suggested but it did not work.
    My field is inside a panel, and I want the focus to stay in the field if validation fails. I used following code, it did not work. The focus still went to next field:

    var form1=Ext.get('packageID').up('#leftPanel');
    form1.down('#packageID').focus(true);

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,982
    Answers
    661
    Vote Rating
    453
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Did you mean to use Ext.getCmp('packageID')?

    I would suggest not using id at all. getCmp is not a recommend approach and hard id's are frowned upon as well.

    if your panel has a parent container, your could use parent.getComponent('#mypanel')

    Modified:
    Code:
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
    
        itemId: 'mypanel',
        
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
    
        // The fields
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            itemId: 'firstname',
            listeners: {
                blur: function(field) {
                    var form = field.up('form');
                    form.down('#middlename').focus(true);
                }    
            }    
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Middle Name',
            name: 'middle',
            itemId: 'middlename'
        }],
    
        // Reset and Submit buttons
        buttons: [
        {
            text: 'Submit',
            formBind: true, //only enabled once the form is valid
            disabled: true
        }],
        renderTo: Ext.getBody(),
            
        listeners: {
            afterlayout: function(form) { // you already have access to the form; no need to create new var
                form.down('#firstname').focus(true);
            }
        }        
     
    });
    
    Ext.create('Ext.Button', {
        text: 'Click me now',
        renderTo: Ext.getBody(),
        handler: function(btn) {
            var panel = Ext.ComponentQuery.query('#mypanel')[0]; // creates array of panel
            panel.down('#firstname').focus(true); 
        }
    });
    Scott.

  7. #7
    Sencha User
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    DSKK is on a distinguished road

      0  

    Default


    Scott,

    I tried the way you suggested, but it has not resolved the issue.
    I have noticed that focus is not working only if it is called onblur function.
    I have set the focus to true so it does highlight the field that needs to be focussed, but the focus doesn't stay on the field and it goes to next field.
    In IE 6, this code runs fine, it doesn't work on IE 7 & 8.
    Following code is called onblur of package ID field:

    function getPackageID(field)
    {
    var packageID=Ext.getCmp('packageID').getValue();
    if(packageID!='' )
    {
    if (packageID.substr(0,3)!='HSN')
    {
    var form1=field.up('#packageIDPanel');
    form1.down('#packageID').focus(true);
    }
    }
    }

  8. #8
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,982
    Answers
    661
    Vote Rating
    453
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please create a small test case or modify the sample I provided to display the problem you are having as I do not have complete picture of what you are trying to access.

    Scott.

  9. #9
    Sencha User
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    DSKK is on a distinguished road

      0  

    Default


    I changed my code as per your example. I am trying to change focus in blur function of package ID field which works fine on IE 6 but doesn't work on IE 7 & 8.

    Code:
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
        itemId: 'mypanel',
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
        // The fields
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'Product ID',
            name: 'ProductID',
            itemId: 'ProductID',
            listeners: {
                blur: function(field) {
            IF(field.getValue().substr(0,3)!='ABC')
            {
                //Keep the focus in this field- This is not working
                field.focus(true);    
            }
            else
            {
                //Shift the focus to next field. This is not working too
                Ext.getCmp('PackageID').focus(true);
            }
                }    
            }    
        },{
            fieldLabel: 'Product ID',
            name: 'PackageID',
            itemId:'PackageID'
        }]
    });
    Scott.

  10. #10
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,982
    Answers
    661
    Vote Rating
    453
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this will work for you

    Code:
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
        itemId: 'mypanel',
        layout: 'anchor',
        renderTo: Ext.getBody(),
        defaults: {
            anchor: '100%'
        },
        // The fields
        defaultType: 'textfield',
        items: [
        {
            fieldLabel: 'Product ID',
            name: 'ProductID',
            itemId: 'productid',
            listeners: {
                blur: function(field) {
                    if (field.getValue().substr(0, 3) != 'ABC') {
                        field.focus(true);
                    }
                    else {
                        var form = field.up('#mypanel');
                        form.down('#testid').focus(true);
                    }
                }
            }
        },
        {
            fieldLabel: 'Package ID',
            name: 'PackageID',
            itemId: 'packageid'
        },
        {
            fieldLabel: 'Test ID',
            name: 'TestID',
            itemId: 'testid'
        }
        ]
    });​
    Scott.

Thread Participants: 2

Tags for this Thread