How to put Close button in date picker (calender)

[pitchaiah]

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]

You would have to add a child to either the template or render elements after render.

[fujy]

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

foo3.png

I hope that could help

Regards,

[pitchaiah]

Thanks for your reploy, But this is not working on ExtJS3.3.1 version. this is working on ExtJS4.0 only