PDA

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



krishneo
7 Jul 2013, 11:41 AM
Team,

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


Ext.define("TestExtjs.controller.TestExamplesController",{
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");
//alert(this.getDatePick().getValue());
},
render : function (that){
this.onButtonRenderFunctionClicked(that);
}
}
}

);
},
onButtonRenderFunctionClicked : function (that)
{

alert("Render of "+that.getItemId()+" is now called...trying getEL focus");
this.getDatePick().setValue(new Date());
this.getDatePick().focus(true);
that.el.on('keypress',function(that){
//alert("Element Dom Event called..trying to focus to the field");
this.getDatePick().setValue(new Date());
this.getDatePick().getEl().focus();
},this);

}
});


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

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.getDatePick().focus();
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?

slemmon
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 () {
this.up('form').down('datefield').focus();
}
}],
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
}]
});