EXTJS CustomDateField 禁用手动文本输入答案

【问题标题】：EXTJS CustomDateField disable manual text enteringEXTJS CustomDateField 禁用手动文本输入
【发布时间】：2011-11-19 11:36:09
【问题描述】：

我有 ExtJS 网格 (editorGridPanel)，其中一个单元格是 CustomDateField。如何禁用在此字段中手动输入日期？

我尝试将侦听器添加到编辑器，但没有按键事件（！）来禁用输入。另外 - 我尝试将侦听器添加到整个网格，=但是当编辑器处于活动状态时，它不会触发网格按键事件。

请帮助我。这是字段定义：

{                         
  header : "Release Date",
  dataIndex : 'releasedate',
  sortable : true,
  width: 90,

  locked: true,

  renderer: function(value, metaData, r) { 
      metaData.attr = rowcolor(r.data.status);
      return value;
  },

  editor : new Ext.ux.form.CustomDateField({
      allowBlank: true,
      format: 'm/d/Y',
      width : 120

  /* this not works VVVV */
      ,listeners: {
              'keypress' : function (field_, new_, old_  )  {
                $.log( "Field", field_ );
                $.log( "New", new_ );
                $.log( "Old", old_ );
          }
      }


  })
 },

谢谢！

【问题讨论】：

标签： javascript extjs

【解决方案1】：

这是答案：

  editor : new Ext.form.DateField({ /*Ext.ux.form.Custom*/
      allowBlank: true,
      format: 'm/d/Y',
      width : 120,
      enableKeyEvents: true,


      listeners: {
              'keydown' : function (field_, e_  )  {
//                    $.log( "keydown", field_, e_ );
                e_.stopEvent();
                return false;
          }
      }


  })

【讨论】：

我试过这个，但不幸的是它没有用，我找到了一个新的解决方案，我将在我的答案中发布。 :)

【解决方案2】：

为防止手动输入，只需将编辑器的 'editable' 属性设置为 false。默认为真。

你的网格列应该是这样的：

header: 'Test',
dataIndex: 'xyz',
editor: {
    xtype: 'datefield',
    editable: false,
}

这是框架本身提供的更好的解决方案。

【讨论】：