当文本恢复为空白时，如何使渲染器显示提示横幅？

Question

我在我的 Sencha Ext.JS 3.4 EditorGridPanel 上设置了渲染器。我允许用户单击按钮、添加行并在这些行中填写各种单元格，我设置了一个提示横幅，以便在添加空白行后立即显示一些有用的文本。

我的提示横幅解决方案基于 another SO answer，该解决方案效果很好，除了一个小警告：当有人在其中一个单元格中输入文本，然后 将该文本还原为blank，之前的内容会保留，不会变成空白。您可以随心所欲地进行编辑，但是一旦您尝试删除单元格中的所有文本，您的更改就会被忽略。

我查看了关于渲染器和 onblur 甚至监听器参数的 Sencha 文档，我尝试捕获 onblur 事件，但似乎没有事件触发（使用 Chrome 开发人员工具断点）。有没有办法让它工作，以便有人可以在输入后将文本恢复为空白？

一些相关代码： （根据评论请求）

  function renderCueBanner( value, metaData, record, rowIndex, colIndex, store ) {
     if( !value && record.phantom )
        return 'Double-click, and type';
     else
        return value;
  }

  //other code

MyCompany.ui.grid.Macros = Ext.extend(Ext.grid.EditorGridPanel, {
  title: 'Macros',

  //other code

  var config = {
     stripeRows: true,
     viewConfig: { emptyText: 'No Macros to display' },
     loadMask: true,
     store: store,
     sm: sm,
     tbar: tbar,
     colModel: new Ext.grid.ColumnModel({
        defaults: {
           menuDisabled: true
        },
        columns: [sm, {
           header: 'Macro Category',
           dataIndex: 'group',
           sortable: true,
           editor: {
              fieldLabel: 'Macro Category',
              forceSelection: false,
              typeAhead: false,
              valueField: 'name',
              xtype     : 'MyCompany.ui.autocompleter.MacroGroup'
           },
           renderer  : renderCueBanner,
           width: 150
        }, {
           header: 'To',
           dataIndex: 'to',
           editor: {
              xtype: 'textfield',
              allowBlank: false
           },
           sortable: true,
           renderer  : renderCueBanner,
           width: 400
        }],
        listeners: {
           'onblur' : {
               fn: renderCueBanner,
               handler: renderCueBanner,
               delay: 100
           }
        },
        isCellEditable: function(col, row) {
           if (!Lynx.userCan('write')) {
              Ext.Msg.alert(
                 'Access Denied',
                    'You are a read only user'
              );
              return false;
           }
           return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
        }
     }),
     //...other code...
   };

Answer 1

问题很可能是由 allowBlank:false 与默认值 revertInvalid:true 共同引起的。

该行为实际上符合预期：您不允许该字段留空，因此编辑器将恢复为最后一个有效的非空值。

尝试添加 revertInvalid:false 或删除 allowBlank:false（首选），应该可以。

当文本恢复为空白时，如何使渲染器显示提示横幅？

How Do I Cause Renderer to Show Cue Banner When Text Reverted to Blank?

extjs

grid