Panel focus does not work in Chrome

[punith.mailme]

Hi,

Ext.getCmp('panelID').focus();

I am unable to focus on the panel in chrome version 18.0.1025.152 m
but the same works fine for IE9.

Not sure if this has already been noticed, if yes please ignore.


Thanks
Punith

[scottmartin]

Can we get more detail? Do you receive an error in the console?

This tested fine in my copies:
18.0.1025.151
18.0.1025.162

Ext.create('Ext.panel.Panel', {
    id: 'panelID',
    title: 'Hello',
    width: 200,
    html: '<p>World!</p>',
    renderTo: Ext.getBody()
});

var p1 = Ext.getCmp('panelID');

var p1c = p1.focus(); // return instance of panel
alert(p1c.title); // show title

Regards,
Scott.

[punith.mailme]

Hi Scott,

Sorry for a delayed reply on this thread.
Here is the thing.

I have written 3 views, on a validation in controller i am focusing on the panel where error occurred.

view :

Ext.define('view.locateSearch.SelectedOptionsPanel3', {
extend: 'Ext.panel.Panel',
alias : 'widget.selectedoptions3',
title : bundle.getMsg('vl.locate.label.selectedopptions'),
collapsible :true,
layout: {
type: 'column'
},
id : 'selectedopptionsId3',
width : 600,
height : 150,


initComponent: function() {
var me = this;
Ext.applyIf(me, {
//Items goes here
});
me.callParent(arguments);
}
});


and In controller :

if(focusYMMOTrue){
//focus on the panel whose id : selectedopptionsId3.
Ext.getCmp('selectedopptionsId3').focus();
}



i have made 5 panels so i can visualize the scrolling effect.

this does not work in chrome, but works fine in IE9
Also if i do any focus on the field, it works in Chrome as well.

Let me know if its any of my mistakes

Thanks
Punith

[shrinkul]

Hi,
I have the same issue, please help.

Thanks,
Shrinivas

[scottmartin]

I see where you define, but when where do you create? Also ...
Change to the following to make sure your component is available:

Ext.getCmp('selectedopptionsId3').focus();
// change to ...
var s3 = Ext.getCmp('selectedopptionsId3');
if (s3) { s3.focus(); }

Please look at the following in your console:

Ext.define('SelectedOptionsPanel3', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.selectedoptions3',
    title: 'bundle',
    collapsible: true,
    layout: {
        type: 'column'
    },
    id: 'selectedopptionsId3',
    width: 600,
    height: 150,

    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            //Items goes here
        });
        me.callParent(arguments);
    }
});

var s3 = Ext.getCmp('selectedopptionsId3');    
    
console.log(s3);
    
var s3c = Ext.create('SelectedOptionsPanel3', {
    renderTo: Ext.getBody()
});
console.log(s3c);

var s3get = Ext.getCmp('selectedopptionsId3');    
console.log(s3get);

Regards,
Scott.

[punith.mailme]

Hi Scott,
tried as u mention earlier.

var s3 = Ext.getCmp('selectedopptionsId3');
if (s3) { s3.focus(); }
but no luck here.


and could u please tell me what to trace in my console on doing"console.log(s3);"

wat i saw was the
Ext.Class.newClass (which has all the property for selectedopptionsId3 panel)


Kindly help us here.

[shrinkul]

Hi,
We are not yet able to resolve the issue, any help. We tried all suggestions and lot of things but no success.

Thanks,
Shrinivas

[evant]

You haven't really provided enough information. What are you expecting to happen when you focus the panel? Why do you say it doesn't work?

[shrinkul]

Hi,
I have provided the information, in one page I have 4 panels and the fields in top panel are mandatory, when user clicks on "Locate" Button then the focus should come to the mandatory field in top panel but it is not happening. with following method call on panel

Ext.getCmp('panelID').focus();

Looking forward to positive response.

Thanks,
Shrinivas

[evant]

So, you're trying to focus a field inside the panel? In that case, why are you calling focus on the panel? Why not on the field itself?