常规功能和模块自定义系统 (cfcmms)—055 extjs6的DateTimeField

最新推荐文章于 2021-03-20 11:21:33 发布

置顶

蒋锋

最新推荐文章于 2021-03-20 11:21:33 发布

阅读量5.1k

点赞数 5

分类专栏：常规功能和模块自定义系统(cfcmms) extjs6+spring mvc+hibernate 常规功能和模块自定义管理系统(cfcmms) 文章标签： cfcmms extjs6 常规功能和模块自定义系统开发经验

本文链接：https://blog.youkuaiyun.com/jfok/article/details/51911719

版权

本文介绍了在ExtJS6中对DateTimeField的修改，由于privates属性的继承问题，作者选择直接复制Ext.picker.Date源码并进行调整。主要内容包括初始化组件的修改、清除时间函数的调整以及添加本地化文件。经过两天的排查和优化，实现了功能的正常运行。提供了源码下载链接供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

055 extjs6的DateTimeField

　　不知道为什么Extjs中始终没有日期和时间结合在一起的控件，这样就有了各个版本的自定义控件，但是随着版本的更新都不太兼容。在网上找了一些DateTimeField的参考过后，发现要完全的在Extjs6中实现，必须要重新生成一个DateTime的选择控件的类。网上大多数的类都是继承自 'Ext.picker.Date' ,经过一些试验过后，发现这个类的

privates 属性不能被很好的继承，因此只能找到Ext.picker.Date的源码，重新拷贝一份来进行修改了。下面来讲解一下主要的更改地方和更改的说明。(源码的下载在最后)

					renderTpl : [
							'<div id="{id}-innerEl" data-ref="innerEl" role="presentation">',
							'<div class="{baseCls}-header">',
							'<div id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-prev {baseCls}-arrow" role="presentation" title="{prevText}"></div>',
							'<div id="{id}-middleBtnEl" data-ref="middleBtnEl" class="{baseCls}-month" role="heading">{%this.renderMonthBtn(values, out)%}</div>',
							'<div id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-next {baseCls}-arrow" role="presentation" title="{nextText}"></div>',
							'</div>',
							'<table role="grid" id="{id}-eventEl" data-ref="eventEl" class="{baseCls}-inner" cellspacing="0" tabindex="0" aria-readonly="true">',
							'<thead>',
							'<tr role="row">',
							'<tpl for="dayNames">',
							'<th role="columnheader" class="{parent.baseCls}-column-header" aria-label="{.}">',
							'<div role="presentation" class="{parent.baseCls}-column-header-inner">{.:this.firstInitial}</div>',
							'</th>',
							'</tpl>',
							'</tr>',
							'</thead>',
							'<tbody>',
							'<tr role="row">',
							'<tpl for="days">',
							'{#:this.isEndOfWeek}',
							'<td role="gridcell">',
							'<div hidefocus="on" class="{parent.baseCls}-date"></div>',
							'</td>',
							'</tpl>',
							'</tr>',
							'</tbody>',
							'</table>',

							// 指定时分秒渲染框架
							'<table id="{id}-timeEl" style="table-layout:auto;margin:0 auto;width:90%;text-align:center;" class="x-datepicker-inner" cellspacing="0">',
							'<tbody><tr

最低0.47元/天解锁文章