View Full Version : Trying to focus to a date field after a tabout on button

7 Jul 2013, 11:41 AM

I have a problem. I have a simple panel.Inside the panel a date field and two buttons.On tabout of the second button i must bring focus back to datefield. Since there is no keypress listener for button had to go for DOM event....This is my controller code

extend : "Ext.app.Controller",
views : ["DatePickerPanel"],
models : [],
stores : [],
refs : [
{ref : "datePick" , selector : "datepickerpanel datefield[itemId=datepickerpanel_testdatepicker_ID]"}

init : function(){
this.control (
"#datepickerpanel_testbutton_ID" : {
afterrender : function(that){
//alert("datepickerpanel_testdatepicker_ID called");
render : function (that){

onButtonRenderFunctionClicked : function (that)

alert("Render of "+that.getItemId()+" is now called...trying getEL focus");
this.getDatePick().setValue(new Date());
//alert("Element Dom Event called..trying to focus to the field");
this.getDatePick().setValue(new Date());


The below two lines..set date and setsfocus on datefield works
this.getDatePick().setValue(new Date());

But in the keypress callback method..the setting of new Date() to datefiled works...but focus doesnt work...focus seems to go to the other button..i tried

//alert("Element Dom Event called..trying to focus to the field");
this.getDatePick().setValue(new Date());
This also didnt work...

Outside of the DOM event focus seems to work..but in the DOM keypress event it is not working..any help?

8 Jul 2013, 10:11 PM
You're trying to focus on a datefield or datepicker? The datepicker widget doesn't itself have a focus method like datefield does. If it's a datefield it'd look similar to the example below:

Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
tbar: [{
text: 'Focus Datefield',
handler: function () {
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
maxValue: new Date() // limited to the current date or prior
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
value: new Date() // defaults to today