ExtJS

标题: ExtJS
作者: Xxd
创建于: 2023-11-29 02:36:06
更新于: 2024-02-07 03:57:05
链接: https://blog.xxdoge.site/2023/11/29/ExtJS/
版权声明: 本文章采用 <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0">CC BY-NC-SA 4.0 进行许可。

ExtJS前端

解决ExtJS中datefield点击后无法显示picker的方法

不明原因（仍在调查中）导致了datefield在grid中进行编辑无法弹出picker。

并且出现此问题时，程序正常运行，不影响任何功能，不会阻断执行，控制台不会报错，只是没有触发相应的事件（好笑的是Extjs官网的cell editing尝试去点击datefield也点不开picker）

一般情况下grid设置datecolumn列是这样设置的

Extjs官方girds cell editing修改日期{
    xtype: 'datecolumn',
    header: 'Available',
    dataIndex: 'availDate',

    width: 95,
    format: 'M d, Y',
    editor: {
        xtype: 'datefield',
        selectOnFocus: false,
        format: 'm/d/y',
        minValue: '01/01/06',
        disabledDays: [0, 6],
        disabledDaysText: 'Plants are not available on the weekends'
    }
}

但是在不定情况下（可能与程序所在环境有关或其他原因），点击编辑时会出现光标，但是点击日历图标时显示picker日历用于选择，所以找到如下解决方案

{
    xtype: 'datecolumn',
    header: '確認完了予定日',
    flex: 1,
    dataIndex: 'CONFIRMCMPYMD',
    align: 'center',
    format: 'Y/m/d',
    editor: {
        editable: true,
        xtype : 'datefield',
        allowBlank: false,
        format: 'Y/m/d',
        minValue: new Date(),
        listeners: {
            //光标聚焦时触发的事件
            'focus': function () {
                this.onTriggerClick(); //显示日期选择框
            }
            // "blur":function(){
            //     this.onMenuHide();//隐藏日期选择框
            // }
        }
    }
}

解决方案：在listeners监听器中监听focus聚焦事件然后触发显示日期选择器