Skip to content
WebBuilder 文档

Ext.picker.Date

xtype 为 datepicker 的 Ext JS 原生组件参考。

Updated View as Markdown

源码定义：ext-all-debug.js:106443。分类：选择器与滑块。

创建示例

var component = Ext.create("Ext.picker.Date", {
  xtype: "datepicker",
  ariaTitle: 'Date Picker: {0}',
  baseCls: Ext.baseCSSPrefix + 'datepicker',
  border: true,
  childEls: [,
  renderTo: Ext.getBody()
});

属性

属性 类型 默认值 说明 配置示例
ariaTitle String 'Date Picker: {0}' 配置组件的 ariaTitle 选项。 ariaTitle: 'Date Picker: {0}'
baseCls Mixed Ext.baseCSSPrefix + 'datepicker' 配置 baseCls 对应的 CSS 类名。 baseCls: Ext.baseCSSPrefix + 'datepicker'
border Boolean true 控制是否显示组件边框。 border: true
childEls Array [ 组件创建后需要引用的子 DOM 元素集合。 childEls: [
disableAnim Boolean false 控制是否启用 disableAnim 行为。 disableAnim: false
disabledDatesText String 'Disabled' 配置组件的 disabledDatesText 选项。 disabledDatesText: 'Disabled'
disabledDaysText String 'Disabled' 配置组件的 disabledDaysText 选项。 disabledDaysText: 'Disabled'
focusOnSelect Boolean true 控制是否启用 focusOnSelect 行为。 focusOnSelect: true
focusOnShow Boolean false 控制是否启用 focusOnShow 行为。 focusOnShow: false
initHour Number 12 配置组件的 initHour 选项。 initHour: 12
maxText String 'This date is after the maximum date' 配置 maxText 限制值。 maxText: 'This date is after the maximum date'
minText String 'This date is before the minimum date' 配置 minText 限制值。 minText: 'This date is before the minimum date'
monthYearFormat String 'F Y' 配置组件的 monthYearFormat 选项。 monthYearFormat: 'F Y'
monthYearText String 'Choose a month (Control+Up/Down to move years)' 配置组件的 monthYearText 选项。 monthYearText: 'Choose a month (Control+Up/Down to move years)'
nextText String 'Next Month (Control+Right)' 配置组件的 nextText 选项。 nextText: 'Next Month (Control+Right)'
numDays Number 42 配置组件的 numDays 选项。 numDays: 42
prevText String 'Previous Month (Control+Left)' 配置组件的 prevText 选项。 prevText: 'Previous Month (Control+Left)'
renderTpl Array [ 配置生成组件内容的 renderTpl 模板。 renderTpl: [
showToday Boolean true 控制是否显示 today。 showToday: true
startDay Number 0 配置组件的 startDay 选项。 startDay: 0
todayText String 'Today' 配置组件的 todayText 选项。 todayText: 'Today'
todayTip String '{0} (Spacebar)' 配置组件的 todayTip 选项。 todayTip: '{0} (Spacebar)'

方法

方法 参数 说明 调用示例
initComponent `` 初始化组件及其子项。 执行时会保留父类默认行为、更新 selectedCls、disabledCellCls 状态。源码涉及 callParent()、addEvents()、initDisabledDays()。 component.initComponent()
getRefOwner `` 读取并返回 refOwner。 执行时会保留父类默认行为。源码涉及 callParent()。 component.getRefOwner()
getRefItems `` 读取并返回 refItems。 component.getRefItems()
beforeRender `` 生成 before 的渲染结果。 执行时会保留父类默认行为、更新 monthBtn、todayBtn 状态。源码涉及 cacheWidth()、getComponentLayout()、callParent()。 component.beforeRender()
cacheWidth `` 缓存 width。源码涉及 parseBox()。 component.cacheWidth()
finishRenderChildren `` 完成 renderChildren。 执行时会保留父类默认行为。源码涉及 callParent()。 component.finishRenderChildren()
onRender container, position 生成 on 的渲染结果。 执行时会保留父类默认行为、更新 cells、textNodes 状态。源码涉及 callParent()、mon()。 component.onRender(...)
initEvents `` 初始化 events。 执行时会保留父类默认行为、刷新界面或布局、更新 prevRepeater、nextRepeater 状态。源码涉及 callParent()、showPrevMonth()、update()、showNextMonth()。 component.initEvents()
handleTabClick e 处理 tabClick。 执行时会派发 select 事件、更新组件值、更新 doCancelFocus 状态。源码涉及 getSelectedDate()、setValue()、fireEvent()、onSelect()。 component.handleTabClick(...)
getSelectedDate date 读取并返回 selectedDate。 component.getSelectedDate(...)
initDisabledDays `` 初始化 disabledDays。 执行时会更新 disabledDatesRE 状态。 component.initDisabledDays()
setDisabledDates dd 设置 disabledDates。 执行时会刷新界面或布局、更新 disabledDates、disabledDatesRE 状态。源码涉及 initDisabledDays()、update()。 component.setDisabledDates(...)
setDisabledDays dd 设置 disabledDays。 执行时会刷新界面或布局、更新 disabledDays 状态。源码涉及 update()。 component.setDisabledDays(...)
setMinDate dt 设置 minDate。 执行时会刷新界面或布局、更新 minDate 状态。源码涉及 update()。 component.setMinDate(...)
setMaxDate dt 设置 maxDate。 执行时会刷新界面或布局、更新 maxDate 状态。源码涉及 update()。 component.setMaxDate(...)
setValue value 设置 value。 执行时会刷新界面或布局、更新 value 状态。源码涉及 update()。 component.setValue(...)
getValue `` 读取并返回 value。 component.getValue()
getDayInitial value 读取并返回 dayInitial。 component.getDayInitial(...)
focus `` 将焦点移动到组件。 执行时会刷新界面或布局。源码涉及 update()。 component.focus()
onEnable `` 处理 enable 回调。 执行时会保留父类默认行为、刷新界面或布局。源码涉及 callParent()、setDisabledStatus()、update()。 component.onEnable()
onDisable `` 处理 disable 回调。 执行时会保留父类默认行为。源码涉及 callParent()、setDisabledStatus()。 component.onDisable()
setDisabledStatus disabled 设置 disabledStatus。 component.setDisabledStatus(...)
getActive `` 读取并返回 active。 component.getActive()
runAnimation isHide 执行 animation。 component.runAnimation(...)
hideMonthPicker animate 隐藏 monthPicker。源码涉及 shouldAnimate()、runAnimation()。 component.hideMonthPicker(...)
doShowMonthPicker `` 执行 showMonthPicker 操作。源码涉及 showMonthPicker()。 component.doShowMonthPicker()
doHideMonthPicker `` 执行 hideMonthPicker 操作。源码涉及 hideMonthPicker()。 component.doHideMonthPicker()
showMonthPicker animate 显示 monthPicker。源码涉及 createMonthPicker()、getActive()、shouldAnimate()、runAnimation()。 component.showMonthPicker(...)
shouldAnimate animate 判断是否应执行 animate。 component.shouldAnimate(...)
createMonthPicker `` 创建 monthPicker。 执行时会更新 monthPicker 状态。源码涉及 on()。 component.createMonthPicker()
onOkClick picker, value 处理 okClick 回调。 执行时会更新组件值。源码涉及 getActive()、setValue()、hideMonthPicker()。 component.onOkClick(...)
onCancelClick `` 处理 cancelClick 回调。源码涉及 selectedUpdate()、hideMonthPicker()。 component.onCancelClick()
showPrevMonth e 显示 prevMonth。 执行时会更新组件值。源码涉及 setValue()。 component.showPrevMonth(...)
showNextMonth e 显示 nextMonth。 执行时会更新组件值。源码涉及 setValue()。 component.showNextMonth(...)
showPrevYear `` 显示 prevYear。 执行时会更新组件值。源码涉及 setValue()。 component.showPrevYear()
showNextYear `` 显示 nextYear。 执行时会更新组件值。源码涉及 setValue()。 component.showNextYear()
handleMouseWheel e 处理 mouseWheel。源码涉及 showPrevMonth()、showNextMonth()。 component.handleMouseWheel(...)
handleDateClick e, t 处理 dateClick。 执行时会派发 select 事件、更新组件值、更新 doCancelFocus 状态。源码涉及 setValue()、fireEvent()、onSelect()。 component.handleDateClick(...)
onSelect `` 处理 select 回调。源码涉及 hide()。 component.onSelect()
selectToday `` 选中 today。 执行时会派发 select 事件、更新组件值。源码涉及 setValue()、fireEvent()、onSelect()。 component.selectToday()
selectedUpdate date 选中 edUpdate。 执行时会派发 highlightitem 事件。源码涉及 fireEvent()、isVisible()。 component.selectedUpdate(...)
fullUpdate date 处理 fullUpdate 操作。 执行时会派发 highlightitem 事件、更新 todayElSpan 状态。源码涉及 isVisible()、fireEvent()。 component.fullUpdate(...)
update date, forceRefresh 更新组件当前状态。 执行时会更新 activeDate 状态。源码涉及 selectedUpdate()、fullUpdate()。 component.update(...)
beforeDestroy `` 在 destroy 前执行预处理。 执行时会保留父类默认行为。源码涉及 callParent()。 component.beforeDestroy()
onShow `` 处理 show 回调。 执行时会保留父类默认行为。源码涉及 callParent()、focus()。 component.onShow()

事件

事件 说明 监听示例
select 用户选中值或记录时触发。 源码在 handleTabClick()、handleDateClick()、selectToday() 中通过 fireEvent() 触发。 listeners: { select: function () {} }
Navigation

Type to search…

↑↓ navigate↵ selectEsc close