Component query to get the picket from datefield

[webfriend13]

Hi All,

Below code is finding the datefield and extracting the datePicket from it attaching beforeshow event.





Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%'
}]
});
var dateField = Ext.ComponentQuery.query('datefield');
var picker = dateField[0].getPicker();
picker.on('beforeshow', function() {
console.log('beforeshow fired');
return false;
});





I want to write the same code using componentquery in my controller's init function. Please help me write this query.




Ext.define('My.controller.FilterController',
{
extend: 'Ext.app.Controller',
init: function () {
this.control({
//Problem: how to write var picker = Ext.ComponentQuery.query('from-datefield')[0].getPicker(); in my controller
'myview #from-datefield': {
beforeshow: this.onBeforeShow
}
});
},
onBeforeShow: function (ctrl, eOpts) {
alert('before show');
return false;
},




The idea is to transalte "var dateField = Ext.ComponentQuery.query('datefield');
var picker = dateField[0].getPicker();" into a query which I can use within the init() of my controller.

[vietits]

Try this:


Ext.define('My.controller.FilterController', {
extend: 'Ext.app.Controller',
init: function () {
var me = this;
me.control({
//Problem: how to write var picker = Ext.ComponentQuery.query('from-datefield')[0].getPicker(); in my controller
'myview #from-datefield': {
render: function(){
var picker = this.getPicker();
picker.on('beforeshow', me.onBeforeShow, me);
}
}
});
},
onBeforeShow: function (ctrl, eOpts) {
alert('before show');
return false;
},

[webfriend13]

Hi Vietits,

System is saying this.getPicker() is undefined. :-|.

[vietits]

Sorry, try to fix the code as below:


Ext.define('My.controller.FilterController', {
extend: 'Ext.app.Controller',
init: function () {
var me = this;
me.control({
//Problem: how to write var picker = Ext.ComponentQuery.query('from-datefield')[0].getPicker(); in my controller
'myview #from-datefield': {
render: function(field){
var picker = field.getPicker();
picker.on('beforeshow', me.onBeforeShow, me);
}
}
});
},
onBeforeShow: function (ctrl, eOpts) {
alert('before show');
return false;
},