PDA

View Full Version : How to put Close button in date picker (calender)



pitchaiah
19 Dec 2012, 10:32 PM
we can add a close button upper side of the calender. so that we can allow a 'calendar close' option. Anybody got an idea how to get it to work ? Pls give the code excerpts if you could think in line with this.

Please find the attached screen shot. Please help in this issue.

Regards,
PBasam.

mitchellsimoens
22 Dec 2012, 7:27 AM
You would have to add a child to either the template or render elements after render.

fujy
23 Dec 2012, 6:22 AM
Hi,
This a simple solution that i use it, it just add a Close button beside Today button in the bottom of the date picker

Note: Ext.form.DateField uses Ext.picker.Date



Ext.override(Ext.picker.Date, {
initComponent : function(){
this.on('afterrender', this.addCloseButton);
this.callParent();
},

addCloseButton: function(){
var me = this,
closeBtn = new Ext.Button({
text: "Close",
ownerLayout: me.getComponentLayout(),
handler: function(){
me.hide();
}
});
closeBtn.render(this.todayBtn.container);
}
});

// Example on using it in Ext DateField
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Date',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'Date',
name: 'to_date',
value: new Date()
}]
});
});

It will like this

40941

I hope that could help

Regards,

pitchaiah
24 Dec 2012, 1:53 AM
Thanks for your reploy, But this is not working on ExtJS3.3.1 version. this is working on ExtJS4.0 only