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

【问题标题】：How Do I Cause Renderer to Show Cue Banner When Text Reverted to Blank?当文本恢复为空白时，如何使渲染器显示提示横幅？
【发布时间】：2015-02-25 15:03:35
【问题描述】：

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

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

我查看了有关渲染器和 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...
   };

【问题讨论】：

能否请您发布您的相关代码？
我添加了一些我的代码；注意渲染器属性。此外，“监听器”是我尝试添加一个 onblur 监听器，我可以用它来修复这种不受欢迎的行为；它没有用，但我把它留在了那里。没有它，渲染器解决方案可以正常工作（除了我的问题中的明显问题）。

标签： extjs grid

【解决方案1】：

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

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

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

【讨论】：

这正是我所需要的。你很有帮助！