HTML form与ExtJS的DatePicker的整合

最新推荐文章于 2020-01-14 13:50:51 发布

最新推荐文章于 2020-01-14 13:50:51 发布 · 101 阅读

文章标签：

#HTML #EXT #JavaScript #ViewUI

本文介绍如何在ExtJS框架中集成日期选择器，并详细展示了HTML与JavaScript代码配置过程，包括自定义日期格式及触发器。

<form>内有一<table>，<table>的一个<td>是酱紫的：

<td width="13%" class="outerRightBorder">
<div class="x-form-field-wrap" style="width:92px;"> 
<input tabindex=8 type="text" id="weiTuoRiQi" name="weiTuoRiQi"
           class="x-form-text x-form-field" style="display:inline;width:75px;" maxlength="200;"
           dataType="Date" 
           format="Y-m-d" 
           require="false" 
           msg="委托日期格式不正确&#13;正确的格式为：年-月-日，如2009-01-01"/>
<span style="height:20px;">
<img onclick="javascript:REMS.showDatePicker(document.getElementById('weiTuoRiQi'));" class="x-form-trigger x-form-date-trigger"/>
</span> 
</div>
</td>

产生的效果是酱紫的：

而呼叫ExtJSDatePicker的代码是酱紫的：

var REMS = {
    //...

    /**
     * show ExtJS date picker (singleton)
     * code borrowed from ExtJS, with slight modification
     */
    ,showDatePicker: function(target) {
        if(this.dateMenu == null){
            this.dateMenu = new Ext.menu.DateMenu();
            Ext.apply(this.dateMenu.picker,  {
                disabledDatesRE : this.ddMatch,
                disabledDatesText : this.disabledDatesText,
                disabledDays : this.disabledDays,
                disabledDaysText : this.disabledDaysText,
                format : 'Y-m-d',
                showToday : this.showToday
            });
        }
        Ext.apply(this.dateMenu.picker, {format:target.getAttribute('format')});
        
        this.dateMenuListeners = {
            select: function(m, d){
                target.value = d.format(target.getAttribute('format'));
                target.focus();
            },
            show : function(){ // retain focus styling
                //this.onFocus();
            },
            hide : function(){
                //this.focus.defer(10, this);
                var ml = this.dateMenuListeners;
                this.dateMenu.un("select", ml.select,  this);
                this.dateMenu.un("show", ml.show,  this);
                this.dateMenu.un("hide", ml.hide,  this);
                target.focus();
            }
        };
        this.dateMenu.on(Ext.apply({}, this.dateMenuListeners, {
            scope:this
        }));
        this.dateMenu.picker.setValue(Date.parseDate(target.value, target.getAttribute('format')) || new Date());
        this.dateMenu.show(target);
    }

    //...

}