1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    95
    Vote Rating
    -1
    pitchaiah is an unknown quantity at this point

      0  

    Default Unanswered: How to put Close button in date picker (calender)

    Unanswered: How to put Close button in date picker (calender)


    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.
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3461
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You would have to add a child to either the template or render elements after render.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    12
    Vote Rating
    0
    fujy is on a distinguished road

      0  

    Default


    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

    Code:
    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,

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    95
    Vote Rating
    -1
    pitchaiah is an unknown quantity at this point

      -1  

    Default


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

Thread Participants: 2