Extjs - Set focus field in panel

Question

I define a panel extend Ext.form.Panel with alias is: "example".
and in my viewport i init xtype = 'example' for my east.
I want when i collapse that panel (example) then my first field (datefield) will focus
I try some below code but not working

//1. not working
,listeners: {
     afterrender: function(field) {
         field.focus(true, 100);
     }
}
//2. not working
Ext.getCmp('myDatefieldId').focus(true, 20);

How can i do that thanks

nemesis nemesis · Accepted Answer · 2013-07-04T09:28:40

Could you provide a little bit more information? Do you use Controllers (mvc-pattern?) If yes, you could try to handle the focussing in the controller.

We have got two DateFields in our center and focussing via Ext.ComponentQuery.query('[itemId=dtf-faelligkeit-ab]')[0].focus() seems to work perfect (tested with chrome developer console)

In my viewport I added a collapse-Listener:

region: 'east',
                layout: 'border',
                id: 'viewport-east-todo-panel',
                title: 'Todo - Detailansicht',
                labelWidth: 100,
                collapsible: true,
                collapsed: true,
                split: true,
                width: 340,
                minSize: 340,
                maxSize: 400,
                items: [
                    {
                        region: 'center',
                        xtype: 'main.todo.TodoDetails'
                    }
                ]
                ,
                listeners: {
                    collapse: function () {
                        Ext.ComponentQuery.query('[itemId=dtf-faelligkeit-ab]')[0].focus();
                    }
                }

In the collapse-Listener, I focus the datefield (itemID: 'dtf-faelligkeit-ab').

Hope I could help you

Extjs - Set focus field in panel

1 Answers