1. #1
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    290
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Default ClearableDateField

    ClearableDateField


    Someone asked about Date field with possibility to clear it's value.
    Here is the code I use:
    Code:
    //Clearable Date field
    Ext.form.ClearableDateField = Ext.extend(Ext.form.DateField, {
        initComponent: function() {
            this.triggerConfig = {
                tag:'span', cls:'x-form-twin-triggers', cn:[
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"},
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-date-trigger"}
            ]};
            Ext.form.ClearableDateField.superclass.initComponent.call(this);
        },
        onTrigger1Click : function()
        {
            this.setValue('');                 // clear content
        },
    
        getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
        initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
        onTrigger2Click: Ext.form.DateField.prototype.onTriggerClick,
        trigger1Class: Ext.form.DateField.prototype.triggerClass,
        trigger2Class: Ext.form.DateField.prototype.triggerClass
    });
    Ext.reg('cleardatefield', Ext.form.ClearableDateField);
    Screen shot 2010-09-15 at 5.38.02 PM.png
    Last edited by Stju; 15 Sep 2010 at 6:40 AM. Reason: added picture..., added @Khebs sugestion

  2. #2
    Sencha User Achilles's Avatar
    Join Date
    Oct 2008
    Location
    guangzhou, china
    Posts
    12
    Vote Rating
    0
    Achilles is on a distinguished road

      0  

    Default


    very good!

  3. #3
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    441
    Vote Rating
    7
    wemerson.januario will become famous soon enough

      0  

    Default nice

    nice


    goodd work. thanks
    Wemerson Januario
    Twitter:
    @wemersonjanuar
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 9106-6689
    From: Goiânia, Brazil
    Desenvolvedor ExtJS/ ExtJS Developer

  4. #4
    Sencha User khebs@live.com's Avatar
    Join Date
    Mar 2008
    Posts
    83
    Vote Rating
    0
    khebs@live.com is on a distinguished road

      0  

    Default


    Nice, a small suggestion though:

    Code:
    this.triggerConfig = {
        tag: 'span', cls: 'x-form-twin-triggers',
        cn: [
            { tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger" },
            { tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-date-trigger" }
        ]
    };

  5. #5
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    290
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Default


    @Khebs, Thanks!
    Updated #1 post.

  6. #6
    Ext User
    Join Date
    Nov 2008
    Posts
    42
    Vote Rating
    0
    jasonb885 is on a distinguished road

      0  

    Default


    Or I'm just applying it directly to DateField, since I want all fields to behave this way.

    Code:
    Ext.apply(Ext.form.DateField.prototype, {
            initComponent: function() {
                    this.triggerConfig = {
                            tag:'span', cls:'x-form-twin-triggers', cn:[
                            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"},
                            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-date-trigger"}
                    ]};
                    Ext.form.DateField.superclass.initComponent.apply(this, arguments);
            },
            onTrigger1Click : function() {
                    this.setValue('');
            },
    
            getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
            initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
            onTrigger2Click: Ext.form.DateField.prototype.onTriggerClick,
            trigger1Class: Ext.form.DateField.prototype.triggerClass,
            trigger2Class: Ext.form.DateField.prototype.triggerClass
    });

  7. #7
    Sencha User
    Join Date
    Jan 2011
    Posts
    47
    Vote Rating
    0
    softm is on a distinguished road

      0  

    Default


    Am make same, but good one - is to have also reset button inside popup. Is there anybody who knows - howto get calendar (popup) component reference?

  8. #8
    Sencha User
    Join Date
    Jan 2011
    Posts
    47
    Vote Rating
    0
    softm is on a distinguished road

      0  

    Default


    Ok, here is code, which makes this reset button in popup ... also with with reset button inside field (last future can be commented if any need)

    Code:
    Ext.apply(Ext.DatePicker.prototype, {
    
        resetText : 'Reset',
        showReset : false,
        resetTip : '',
    
        selectReset : function()
        {
            if(this.resetBtn && !this.resetBtn.disabled)
            {
                this.setValue(new Date().clearTime());
                this.fireEvent('select', this, 'Selected');
            }
        },
    
    
    
    
        onRender : function(container, position){
    
    
    
            var m = [
                 '<table cellspacing="0">',
                    '<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'"> </a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'"> </a></td></tr>',
                    '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'],
                    dn = Ext.DatePicker.prototype.dayNames,
                    i;
    
            for(i = 0; i < 7; i++){
                var d = this.startDay+i;
                if(d > 6){
                    d = d-7;
                }
                m.push('<th><span>', dn[d].substr(0,1), '</span></th>');
            }
            m[m.length] = '</tr></thead><tbody><tr>';
            for(i = 0; i < 42; i++) {
                if(i % 7 === 0 && i !== 0){
                    m[m.length] = '</tr><tr>';
                }
                m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
            }
            m.push('</tr></tbody></table></td></tr>',
    
                    this.showToday || this.showReset ? '<tr><td colspan="3" class="x-date-bottom" align="center"><div style="overflow:auto;width:78px;text-align:center;">' : "",
                    this.showToday ? '<div class="x-date-bottom1" style="float:left;overflow:auto;"></div>' : '',
                    this.showReset ? '<div class="x-date-bottom2" style="float:left;overflow:auto;"></div>' : '',
                    this.showToday || this.showReset ? '</div></td></tr>' : "",
    
                    '</table><div class="x-date-mp"></div>');
    
            var el = document.createElement('div');
    
    
    
            el.className = 'x-date-picker';
            el.innerHTML = m.join('');
    
            container.dom.insertBefore(el, position);
    
            this.el = Ext.get(el);
            this.eventEl = Ext.get(el.firstChild);
    
            this.prevRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-left a'), {
                handler: this.showPrevMonth,
                scope: this,
                preventDefault:true,
                stopDefault:true
            });
    
            this.nextRepeater = new Ext.util.ClickRepeater(this.el.child('td.x-date-right a'), {
                handler: this.showNextMonth,
                scope: this,
                preventDefault:true,
                stopDefault:true
            });
    
            this.monthPicker = this.el.down('div.x-date-mp');
            this.monthPicker.enableDisplayMode('block');
    
            this.keyNav = new Ext.KeyNav(this.eventEl, {
                'left' : function(e){
                    if(e.ctrlKey){
                        this.showPrevMonth();
                    }else{
                        this.update(this.activeDate.add('d', -1));
                    }
                },
    
                'right' : function(e){
                    if(e.ctrlKey){
                        this.showNextMonth();
                    }else{
                        this.update(this.activeDate.add('d', 1));
                    }
                },
    
                'up' : function(e){
                    if(e.ctrlKey){
                        this.showNextYear();
                    }else{
                        this.update(this.activeDate.add('d', -7));
                    }
                },
    
                'down' : function(e){
                    if(e.ctrlKey){
                        this.showPrevYear();
                    }else{
                        this.update(this.activeDate.add('d', 7));
                    }
                },
    
                'pageUp' : function(e){
                    this.showNextMonth();
                },
    
                'pageDown' : function(e){
                    this.showPrevMonth();
                },
    
                'enter' : function(e){
                    e.stopPropagation();
                    return true;
                },
    
                scope : this
            });
    
            this.el.unselectable();
    
            this.cells = this.el.select('table.x-date-inner tbody td');
            this.textNodes = this.el.query('table.x-date-inner tbody span');
    
            this.mbtn = new Ext.Button({
                text: ' ',
                tooltip: this.monthYearText,
                renderTo: this.el.child('td.x-date-middle', true)
            });
            this.mbtn.el.child('em').addClass('x-btn-arrow');
    
            if(this.showToday){
                this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,  this);
                var today = (new Date()).dateFormat(this.format);
                this.todayBtn = new Ext.Button({
                    renderTo: this.el.child('div.x-date-bottom1', true),
                    text: String.format(this.todayText, today),
                    tooltip: String.format(this.todayTip, today),
                    handler: this.selectToday,
                    scope: this
                });
            }
    
    
            if(this.showReset){
                //this.resetKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectReset,  this);
                //var today = (new Date()).dateFormat(this.format);
                this.resetBtn = new Ext.Button({
                    renderTo: this.el.child('div.x-date-bottom2', true),
                    text: this.resetText,
                    tooltip: this.resetTip,
                    handler: this.selectReset,
                    scope: this
                });
            }
    
    
    
    
            this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this);
            this.mon(this.eventEl, 'click', this.handleDateClick,  this, {delegate: 'a.x-date-date'});
            this.mon(this.mbtn, 'click', this.showMonthPicker, this);
            this.onEnable(true);
    
            $.log( "Rendered" ); // do not run
    
        }
    
    
    });
    
    // DATE MENU REWRITE
    
    Ext.apply(Ext.menu.DateMenu.prototype, {
    
        showReset: false, //new property - to control all
        
        initComponent : function(){
            this.on('beforeshow', this.onBeforeShow, this);
            if(this.strict = (Ext.isIE7 && Ext.isStrict)){
                this.on('show', this.onShow, this, {single: true, delay: 20});
            }
            Ext.apply(this, {
                plain: true,
                showSeparator: false,
                items: this.picker = new Ext.DatePicker(Ext.applyIf({
                    internalRender: this.strict || !Ext.isIE,
                    ctCls: 'x-menu-date-item',
                    id: this.pickerId
                }, this.initialConfig))
            });
            this.picker.showReset = this.showReset; //<---- here init picker as wee need
            this.picker.purgeListeners();
            Ext.menu.DateMenu.superclass.initComponent.call(this);
            
            this.relayEvents(this.picker, ['select']);
            this.on('show', this.picker.focus, this.picker);
            this.on('select', this.menuHide, this);
            if(this.handler){
                this.on('select', this.handler, this.scope || this);
            }
        }
    
    });
    
    
    //----------------------
    Ext.apply(Ext.form.DateField.prototype, {
    
        showReset: false,
    
        onTriggerClick : function(){
            if(this.disabled){
                return;
            }
            if(this.menu == null){
                this.menu = new Ext.menu.DateMenu({
                    hideOnClick: false,
                    focusOnSelect: false,
                    showReset:true
                });
            }
            this.onFocus();
            Ext.apply(this.menu.picker,  {
                minDate : this.minValue,
                maxDate : this.maxValue,
                disabledDatesRE : this.disabledDatesRE,
                disabledDatesText : this.disabledDatesText,
                disabledDays : this.disabledDays,
                disabledDaysText : this.disabledDaysText,
                format : this.format,
                showToday : this.showToday,
                startDay: this.startDay,
                showReset: this.showReset,
                minText : String.format(this.minText, this.formatDate(this.minValue)),
                maxText : String.format(this.maxText, this.formatDate(this.maxValue))
            });
            this.menu.picker.setValue(this.getValue() || new Date());
            this.menu.show(this.el, "tl-bl?");
            this.menuEvents('on');
        }
    
    });
    
    
    
    
    
    /* reset datefield component */
    
    Ext.ux.ResetDateField = Ext.extend(Ext.form.DateField, {
    
        isStart: true,
        showReset: true,
    
    
    
    //    yearsToGet: 5,
        reset_trg_class: 'x-form-clear-trigger',
        
        initComponent: function() {
            this.triggerConfig = { 
                tag:'span', cls:'x-form-twin-triggers', cn:[ 
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-date-trigger"},
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.reset_trg_class}
            ]}; 
            Ext.ux.ResetDateField.superclass.initComponent.call(this);
        },
    
        
        getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger, 
        initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
        onTrigger2Click: function(e) 
        { 
            this.reset( );
    //        this.setValue( '' );
    //        store.commit();
        },
        onTrigger1Click: Ext.form.DateField.prototype.onTriggerClick, 
        trigger1Class: Ext.form.DateField.prototype.triggerClass,
    
    // main so
    });

    ---
    Now, when is need of use field with reset:

    Code:
    {                         
          header : "Sent Date",
          dataIndex : 'sent_date',
          sortable : true,
          width: 80,
          renderer: function(value, metaData, r) { 
              metaData.attr = rowcolor(r.data.status);
              return value;
          },
    
    //      editor : new Ext.form.DateField({ /*Ext.ux.form.Custom*/
          editor : new Ext.ux.ResetDateField({ /*Ext.ux.form.Custom*/
    
              allowBlank: true,
              format: 'm/d/Y',
              width : 120,
              enableKeyEvents: true,
    
    
              listeners: {
                      'keydown' : function (field_, e_  )  {
                        field_.onTriggerClick();
                        e_.stopEvent();
                        return false;
                  },
                      'focus' : function (field_  )  {
                        field_.onTriggerClick();
                        e_.stopEvent();
                        return false;
                  }
    
              }
    
    
          })
      }
    Here... i write few lines about - how this works. Maybe somebody will help me optimize this?