getClass for actionColumn只在幾行

Question

我正在使用下面的代碼來爲操作列設置css類。 但即使結果爲null，某些元素也會被extjs插入。

getClass: function(v, meta, data) {   
    if (data.myDate < new Date()) 
     return null; 
    else 
     return 'insert'; 
} 

爲返回NULL生成的HTML：

<img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
class="x-action-col-icon x-action-col-1 null"> 

的主要問題是，移動這個「空白」空間，當光標變爲手形指針。

當沒有圖標顯示時，有沒有辦法生成元素？

Answer 1

我沒有看到任何方式做到這一點，而不需要擴展動作欄。 IMO最簡單的方法是提供定製的renderer功能。例如：

Ext.define('Ext.grid.column.MyAction', { 
    extend: 'Ext.grid.column.Action', 

    constructor: function(config) { 
     var me = this, 
      cfg = Ext.apply({}, config), 
      items = cfg.items || [me], 
      l = items.length, 
      i, 
      item, 
      cls; 

     me.callParent(arguments); 

     me.renderer = function(v, meta) { 
      v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : ''; 

      meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell'; 
      for (i = 0; i < l; i++) { 
       item = items[i]; 
       item.disable = Ext.Function.bind(me.disableAction, me, [i]); 
       item.enable = Ext.Function.bind(me.enableAction, me, [i]); 

       cls = (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || '')); 
       if (cls !== null) { 
        v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) + 
         '" class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.iconCls || '') + 
         ' ' + cls + '"' + 
         ((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />'; 
       } 
      } 
      return v; 
     }; 
    } 

});