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

[DSKK]

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.

[scottmartin]

See if this will work for you:

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.

[DSKK]

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?

[scottmartin]

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.

[DSKK]

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);

[scottmartin]

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:

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.

[DSKK]

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);
}
}
}

[scottmartin]

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.

[DSKK]

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.

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.

[scottmartin]

See if this will work for you

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.