码迷,mamicode.com
首页 > 其他好文 > 详细

Ext4.X--年月选择组件

时间:2014-06-28 12:00:41      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   get   使用   

1.类的定义:

  在Ext项目开发中,有时会用到只选择年月的日期组件,下面的代码会帮你完成,只需向下面的类拷贝到你的项目中即可使用。

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;
        return Ext.create(‘Ext.picker.Month‘, {
            pickerField: me,
            ownerCt: me.ownerCt,
            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();
                }
            }
        });
    },
    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]);
    }
}); 

2.用法:

‘请输入年月‘,
{
    xtype:‘monthfield‘,
    format:"Y-m",
    id:‘monthId‘,
    value:new Date()
}
                                    

3.运行效果:

bubuko.com,布布扣

Ext4.X--年月选择组件,布布扣,bubuko.com

Ext4.X--年月选择组件

标签:style   blog   http   color   get   使用   

原文地址:http://www.cnblogs.com/zhougaojun/p/3798809.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!