zoukankan      html  css  js  c++  java
  • Ext5.1日期控件仅显示年月

    1、注册xtype类型

    2、保存文件为xxxx.js

    3、使用 xtype : monthfield

       return this.buildToolbar({
                    items: [
                        { xtype: 'monthfield', cId: 'dfBeginDate', labelWidth: 40,  150, format: 'Y-m', fieldLabel: '日期' },
                        { xtype: 'monthfield', cId: 'dfEndDate', labelWidth: 20,  125, format: 'Y-m', fieldLabel: '至' },                  
                        { cId: 'btnSearch', text: "查询", operationName: 'Search' }
                    ]
                });
    

    4、效果

      

    -------------------------------------------------------------------

    Ext.define('Ext.form.field.Month', {
        extend: 'Ext.form.field.Date',
        alias: 'widget.monthfield',
        requires: ['Ext.picker.Month'],
        alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'],
        selectMonth: null,
        createPicker: function () {
            var me = this,
                format = Ext.String.format,
                pickerConfig;
            pickerConfig = {
                pickerField: me,
                ownerCmp: me,
                renderTo: document.body,
                floating: true,
                hidden: true,
                focusOnShow: true,
                minDate: me.minValue,
                maxDate: me.maxValue,
                disabledDatesRE: me.disabledDatesRE,
                disabledDatesText: me.disabledDatesText,
                disabledDays: me.disabledDays,
                disabledDaysText: me.disabledDaysText,
                format: me.format,
                showToday: me.showToday,
                startDay: me.startDay,
                minText: format(me.minText, me.formatDate(me.minValue)),
                maxText: format(me.maxText, me.formatDate(me.maxValue)),
                listeners: {
                    select: { scope: me, fn: me.onSelect },
                    monthdblclick: { scope: me, fn: me.onOKClick },
                    yeardblclick: { scope: me, fn: me.onOKClick },
                    OkClick: { scope: me, fn: me.onOKClick },
                    CancelClick: { scope: me, fn: me.onCancelClick }
                },
                keyNavConfig: {
                    esc: function () {
                        me.collapse();
                    }
                }
            };
            if (Ext.isChrome) {
                me.originalCollapse = me.collapse;
                pickerConfig.listeners.boxready = {
                    fn: function () {
                        this.picker.el.on({
                            mousedown: function () {
                                this.collapse = Ext.emptyFn;
                            },
                            mouseup: function () {
                                this.collapse = this.originalCollapse;
                            },
                            scope: this
                        });
                    },
                    scope: me,
                    single: true
                }
            }
            return Ext.create('Ext.picker.Month', pickerConfig);
        },
        onCancelClick: function () {
            var me = this;
            me.selectMonth = null;
            me.collapse();
        },
        onOKClick: function () {
            var me = this;
            if (me.selectMonth) {
                me.setValue(me.selectMonth);
                me.fireEvent('select', me, me.selectMonth);
            }
            me.collapse();
        },
        onSelect: function (m, d) {
            var me = this;
            me.selectMonth = new Date((d[0] + 1) + '/1/' + d[1]);
        }
    });
  • 相关阅读:
    SpringMVC中静态获取request对象 Spring中获取 HttpServletRequest对象【转载】
    springcloud 的loadbalancer 轮询算法切换方法 2021.4.3
    springboot项目启动增加图标
    rabbitmq 端口作用以及修改方法
    centos8 安装rabbitmq
    springcloud config client Value获取不到信息的问题的处理方法
    springcloud config配置git作为数据源然后启动报错 If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.
    Sublime Text的列模式如何操作
    centos8 安装redis
    jQuery简单的Ajax调用
  • 原文地址:https://www.cnblogs.com/dbycl/p/5829614.html
Copyright © 2011-2022 走看看