Results 1 to 8 of 8

Thread: ClearableDateField

  1. #1
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    293

    Default 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
    17

    Default

    very good!

  3. #3
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    902

    Default nice

    goodd work. thanks
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  4. #4

    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
    293

    Default

    @Khebs, Thanks!
    Updated #1 post.

  6. #6

    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

    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

    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?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •