Results 1 to 3 of 3

Thread: DateField, - how to make changes to popup, i.e. got calendar control + add buttons?

  1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    47

    Default DateField, - how to make changes to popup, i.e. got calendar control + add buttons?

    Have a problem of making changes to calendar control. Want add own button to the popu which do something & set up date, but dont understood - how to get this popup.

    Is there any event that fires when popup appears? How is possible at all to add this buttons?

    PS. Have made own DateTime component ... to add this button inside field, but want make it inside popup ...
    Pls help me.

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    47

    Default

    Ok, i made already changes to ext-all-debug.js.
    All works.
    But now am trying made an override of methods ... and nothing works.

    Here is code:


    Code:
    Ext.override(Ext.DatePicker, {
    
        resetText : 'Reset',
        showReset : true,
        resetTip : '',
    
    
        onRender : function(container, position){
            var m = [
                 '<table cellspacing="0">',
                    '<tr><td class="x-date-left"><a href="#" title="', this.prevText ,'">&#160;</a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'">&#160;</a></td></tr>',
                    '<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'],
                    dn = Ext.form.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: '&#160;',
                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);
        }.createSequence(Ext.DatePicker.prototype.onRender),
    
    // ereset so
    
        selectReset : function(){
            if(this.resetBtn && !this.resetBtn.disabled){
                this.setValue(new Date().clearTime());
                this.fireEvent('select', this, 'ext support is ');
            }
        }.createSequence(Ext.DatePicker.prototype.selectReset)
    
    
    
    });
    Can anybody help me - what is wrong in adding this override???? Can anybody help?

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    47

    Default

    error is:


    this.getVisibilityEl() is undefined
    [IMG]chrome://firebug/content/blank.gif[/IMG] return this.rendered && this.getVisibilityEl().isVisible();

Posting Permissions

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