EXTJS 5.1上的月份字段

我从另一个堆栈溢出帖子中得到了这把很棒的小提琴（谢谢igor）。但是我有一个问题：如果我选择extjs版本5.1，代码就不能工作，这是我在应用程序中使用的版本。问题是，当我点击一个月或一年时，日历就会关闭（你可以通过将版本设置为5.1并再次运行小提琴来尝试这种行为）。 我试图自定义代码的某些部分，但没有任何更改：s

任何人都知道为什么extjs5.1不能使用它，或者我如何解决这个问题

---

提前感谢：）

某种程度上，铬的行为是不同的。请尝试以下操作：

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);
}

添加属性：

---

onFocusLeave:Ext.emptyFn

试试这个它对我来说很好

Ext.onReady(function() {
  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]);
    }
  });

  Ext.create('Ext.form.field.Month', {
    format: 'F, Y',
    fieldLabel: 'Date',
    renderTo: Ext.getBody()
  });
});

---

在ExtJs 5.1中使用FireFoxOH对我来说效果很好！！是的，它也适用于IE！！但它在chrome上不起作用！！奇怪的是^^有没有办法阻止在这个自定义日期字段中手动输入。i、 e.我应该只能通过选取器给出值

Ext.onReady(function() {
  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]);
    }
  });

  Ext.create('Ext.form.field.Month', {
    format: 'F, Y',
    fieldLabel: 'Date',
    renderTo: Ext.getBody()
  });
});