ExtJs只选择年月

最新推荐文章于 2020-12-30 06:37:19 发布

复活的秦俑

最新推荐文章于 2020-12-30 06:37:19 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ExtJS

本文链接：https://blog.youkuaiyun.com/q262800095/article/details/8901560

ExtJS 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在ExtJS中使用monthfield组件来实现仅选择年月的功能。通过参考提供的链接，读者可以了解到具体的调用方法和实现细节。

Extjs monthfield的调用如下：

{ 
        xtype:"monthfield",
        id:"month",
	format:"Y-m",
	value:Ext.util.Format.date(new Date(), 'Y-m'),
	listeners: {
	        change: function(){
		var month = Ext.util.Format.date(Ext.getCmp("month").getValue(), 'Y-m') + '-00';
		//load date
			store_effort.load({
				params: {
					project_id : [% project_id %],
					 type : 'effort',
					 month : month
				 }
			});
		}
	 }
}

引入monthPick.js，代码如下

Ext.define('Ext.ux.form.MonthField', {
    extend: 'Ext.form.field.Picker',
    alias: 'widget.monthfield',
    //requires: ['Ext.picker.Date'],
    //alternateClassName: ['Ext.form.DateField', 'Ext.form.Date'],


    format: "Y-m",

    altFormats: "m/y|m/Y|m-y|m-Y|my|mY|y/m|Y/m|y-m|Y-m|ym|Ym",

    //disabledDaysText: "Disabled",

    //disabledDatesText: "Disabled",

    //minText: "The date in this field must be equal to or after {0}",

    //maxText: "The date in this field must be equal to or before {0}",

    //invalidText: "{0} is not a valid date - it must be in the format {1}",

    triggerCls: Ext.baseCSSPrefix + 'form-date-trigger',

    //showToday: true,

    //initTime: '12',

    //initTimeFormat: 'H',

    matchFieldWidth: false,

    startDay: new Date(),

    initComponent: function () {
        var me = this;


        me.disabledDatesRE = null;

        me.callParent();
    },

    initValue: function () {
        var me = this,
            value = me.value;

        if (Ext.isString(value)) {
            me.value = Ext.Date.parse(value, this.format);
        }
        if (me.value)
            me.startDay = me.value;
        me.callParent();
    },

    rawToValue: function (rawValue) {
        return Ext.Date.parse(rawValue, this.format) || rawValue || null;
    },

    valueToRaw: function (value) {
        return this.formatDate(value);
    },



    formatDate: function (date) {
        return Ext.isDate(date) ? Ext.Date.dateFormat(date, this.format) : date;
    },
    createPicker: function () {
        var me = this,
            format = Ext.String.format;

        return Ext.create('Ext.picker.Month', {
            //renderTo: me.el,
            pickerField: me,
            ownerCt: me.ownerCt,
            renderTo: document.body,
            floating: true,
            shadow: false,
            height:200,
            focusOnShow: true,
            listeners: {
                scope: me,
                cancelclick: me.onCancelClick,
                okclick: me.onOkClick,
                yeardblclick: me.onOkClick,
                monthdblclick: me.onOkClick
            }
        });
    },

    onExpand: function () {
        //this.picker.show();
        this.picker.setValue(this.startDay);
        //
        
    },

    //    onCollapse: function () {
    //        this.focus(false, 60);
    //    },

    onOkClick: function (picker, value) {
        var me = this,
            month = value[0],
            year = value[1],
            date = new Date(year, month, 1);
        me.startDay = date;
        me.setValue(date);
        this.picker.hide();
        //this.blur();
    },

    onCancelClick: function () {
        this.picker.hide();
        //this.blur();
    }

});

参考：www.hubeidami.sinaapp.com