【ExtJS】自定义组件datetimefield(一)

 

---

　　目的：

　　ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time。不过没有一个在选择日期时选择时间的控件datetimefield。目的就是运用自定义组件的方法，来扩展下拉日期选择控件Ext.form.field.Date，在下拉框中添加时间选择的组件。目标效果：

       

---

---

 

第一步：继承Ext.picker.Date，创建My.picker.DateTime类

Ext.define('My.picker.DateTime', {  
    extend: 'Ext.picker.Date',
    alias: 'widget.datetimepicker',
    okText:'确定',
    okTip:'确定',
  
    renderTpl: [
        '<div id="{id}-innerEl" data-ref="innerEl" role="grid">',
            '<div role="presentation" class="{baseCls}-header">',
                '<a id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="button" title="{prevText}" hidefocus="on" ></a>',
                '<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month">{%this.renderMonthBtn(values, out)%}</div>',
                '<a id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="button" title="{nextText}" hidefocus="on" ></a>',
            '</div>',
            '<table id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">',
                '<thead role="presentation"><tr role="row">',
                    '<tpl for="dayNames">',
                        '<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',
                            '<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
                        '</th>',
                    '</tpl>',
                '</tr></thead>',
                '<tbody role="presentation"><tr role="row">',
                    '<tpl for="days">',
                        '{#:this.isEndOfWeek}',
                        '<td role="gridcell" id="{[Ext.id()]}">',
                            // The '#' is needed for keyboard navigation
                            '<a href="#" role="button" hidefocus="on" class="{parent.baseCls}-date"></a>',
                        '</td>',
                    '</tpl>',
                '</tr></tbody>',
            '</table>',
            '<tpl if="showToday">',
                '<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
            '</tpl>',
        '</div>',
        {
            firstInitial: function(value) {
                return Ext.picker.Date.prototype.getDayInitial(value);
            },
            isEndOfWeek: function(value) {
                // convert from 1 based index to 0 based
                // by decrementing value once.
                value--;
                var end = value % 7 === 0 && value !== 0;
                return end ? '</tr><tr role="row">' : '';
            },
            renderTodayBtn: function(values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
            },
            renderMonthBtn: function(values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
            }
        }
    ]
 });

其中renderTpl部分与后面按钮渲染部分出自源码。

效果：

---

第二步:在原布局中添加3个组件用来选取时、分、秒，添加一个确认按钮，并在组件渲染之前，将自定义添加的时、分、秒和确认按钮进行初始化

Ext.define('My.picker.DateTime', {  
    extend: 'Ext.picker.Date',
    alias: 'widget.datetimepicker', 
    okText:'确定',
    okTip:'确定',
  
    renderTpl: [
        '<div id="{id}-innerEl" data-ref="innerEl" role="grid">',
            '<div role="presentation" class="{baseCls}-header">',
                '<a id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="button" title="{prevText}" hidefocus="on" ></a>',
                '<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month">{%this.renderMonthBtn(values, out)%}</div>',
                '<a id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="button" title="{nextText}" hidefocus="on" ></a>',
            '</div>',
            '<table id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" role="grid">',
                '<thead role="presentation"><tr role="row">',
                    '<tpl for="dayNames">',
                        '<th role="columnheader" class="{parent.baseCls}-column-header" title="{.}">',
                            '<div class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
                        '</th>',
                    '</tpl>',
                '</tr></thead>',
                '<tbody role="presentation"><tr role="row">',
                    '<tpl for="days">',
                        '{#:this.isEndOfWeek}',
                        '<td role="gridcell" id="{[Ext.id()]}">',
                            // The '#' is needed for keyboard navigation
                            '<a href="#" role="button" hidefocus="on" class="{parent.baseCls}-date"></a>',
                        '</td>',
                    '</tpl>',
                '</tr></tbody>',
            
            '<table id="{id}-timeEl" style="table-layout:auto;width:auto;margin:0 3px;" class="x-datepicker-inner" cellspacing="0">',  
                '<tbody><tr>',  
                    '<td>{%this.renderHourBtn(values,out)%}</td>',  
                    '<td>{%this.renderMinuteBtn(values,out)%}</td>',  
                    '<td>{%this.renderSecondBtn(values,out)%}</td>',  
                '</tr></tbody>',  
            '</table>',  
  
            '<tpl if="showToday">',  
                '<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderOkBtn(values, out)%}{%this.renderTodayBtn(values, out)%}</div>',  
            '</tpl>',  
        '</div>',
        {
            firstInitial: function(value) {
                return Ext.picker.Date.prototype.getDayInitial(value);
            },
            isEndOfWeek: function(value) {
                // convert from 1 based index to 0 based
                // by decrementing value once.
                value--;
                var end = value % 7 === 0 && value !== 0;
                return end ? '</tr><tr role="row">' : '';
            },
            renderTodayBtn: function(values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
            },
            renderMonthBtn: function(values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
            },
            renderHourBtn: function(values, out) {  
                Ext.DomHelper.generateMarkup(values.$comp.hourBtn.getRenderTree(), out);
            },  
            renderMinuteBtn: function(values, out) {  
                Ext.DomHelper.generateMarkup(values.$comp.minuteBtn.getRenderTree(), out);  
            },  
            renderSecondBtn: function(values, out) {  
                Ext.DomHelper.generateMarkup(values.$comp.secondBtn.getRenderTree(), out);  
            },  
            renderOkBtn: function(values, out) {  
                Ext.DomHelper.generateMarkup(values.$comp.okBtn.getRenderTree(), out);  
            }  
        }
    ],   
    beforeRender: function () {  
        var me = this;  
        me.hourBtn=new Ext.form.field.Number({  
            minValue:0,  
            maxValue:23,  
            step:1,  
            width:55  
        });  
        me.minuteBtn=new Ext.form.field.Number({  
            minValue:0,  
            maxValue:59,  
            step:1,  
            width:70,  
            labelWidth:10,  
            fieldLabel:'&nbsp;'  
        });  
        me.secondBtn=new Ext.form.field.Number({  
            minValue:0,  
            maxValue:59,  
            step:1,  
            width:70,  
            labelWidth:10,  
            fieldLabel:'&nbsp;'
        });  
  
        me.okBtn = new Ext.button.Button({  
            ownerCt: me,  
            ownerLayout: me.getComponentLayout(),  
            text: me.okText,  
            tooltip: me.okTip,  
            tooltipType:'title',  
            handler:me.okHandler,
            scope: me  
        });  
        me.callParent();  
    }
 });

效果：

---

 第三步:添加按钮事件绑定，各种内部逻辑的处理，获取选定的时间等等