如何禁用單行的操作列項目？

Question

考慮這個JSON樣品：

[{id:1,editable:true},{id:2,editable:false}] 

這些記錄關於在商店要加載，則網格面板內顯示。此網格有一個用於編輯目的的操作列項目。我正在尋找一種方法來禁用第二行的「編輯」按鈕，而無需在渲染後執行計算。我想使用內置功能，其功能與renderer屬性相似，而不是在網格渲染完成後循環訪問存儲以更新每行。

是否ExtJS的4.1.1提供了這樣的功能？

Answer 1

我已經忘記了這個問題，直到路易斯張貼了他的答案。我最終決定重寫ActionColumn以添加缺少的功能。下面是代碼：

Ext.grid.column.Action.override({ 
    defaultRenderer: function (v, meta) { 
     var me = this, 
      disabled, tooltip, 
      prefix = Ext.baseCSSPrefix, 
      scope = me.origScope || me, 
      items = me.items, 
      len = items.length, 
      i = 0, 
      item; 
     v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : ''; 
     meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell'; 
     for (; i < len; i++) { 
      item = items[i]; 
      disabled = item.disabled || (item.isDisabled ? item.isDisabled.apply(item.scope || scope, arguments) : false); 
      tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null)); 
      if (!item.hasActionConfiguration) { 
       item.stopSelection = me.stopSelection; 
       item.disable = Ext.Function.bind(me.disableAction, me, [i], 0); 
       item.enable = Ext.Function.bind(me.enableAction, me, [i], 0); 
       item.hasActionConfiguration = true; 
      } 
      v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) + 
      '" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') + 
      ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' + 
      (tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' />'; 
     } 
     return v; 
    } 
}); 

Answer 2

我正要說這個出發了：我不惜一切代價避免使用操作欄，這是完全不能做任何形式的呈現邏輯（如每行不同的圖像，並顯示有條件基於行模式）。相反，請定義一個呈現圖像並利用列中的單擊事件的常規列。下面是從我的代碼示例：

{ 
    header: " ", 
    dataIndex: "some_index", 
    width:  26, 
    renderer: function(value, metaData){ 
     metaData.style += "padding:0px;"; 
     if(value) 
      return "&nbsp;<img src=\"extjs/4.0/sms/icons/fam/magnifier.png\"/>"; 
     return value; 
    }, 
    listeners: { 
     click: function(gridView, htmlSomething, rowIndex, columnIndex, theEvent){ 
      var store = myGrid.getStore(); 
      var record = store.getAt(rowIndex); 
      if(record.get("some_index")) 
       //do action 
     } 
    } 
} 

Answer 3

您可以使用設置isDisabled配置（至少從4.2.1版本）：

{ 
    xtype:'actioncolumn', 
    width:20, 
    items: [ 
     { 
      icon: 'app/images/edit.png', 
      tooltip: 'Edit this row', 
      handler: function(gridview, rowIndex, colIndex, item, e, record, row) { 
       var grid=gridview.up('grid'); 
       // You need to listen to this event on your grid. 
       grid.fireEvent('editRecord', grid, record); 
      }, 
      isDisabled: function(view, rowIndex, colIndex, item, record) { 
       // Returns true if 'editable' is false (, null, or undefined) 
       return !record.get('editable'); 
      } 
    ] 
} 

當isDisabled（..）返回true圖標鼠標點擊時不會觸發處理程序。

Answer 4

我發現，在煎茶論壇以下解決方案： 此外，對於「isDisabled」在這裏已經描述功能全，你可以使用下面的配置來改變（或隱藏）圖標根據記錄顯示：

getClass: function(value,metadata,record){ 
    if (record.get('description')){ //read your condition from the record 
     return 'icon-pencil-go'; // add a CSS-Class to display what icon you like 
    } else { 
     return '';  //add no CSS-Class 
    } 
} 

我的CSS類的定義爲：

.icon-pencil-go { 
    background-image: url('../images/icons/famfamfam/pencil_go.png') !important; 
} 

由於我顯示通過CSS反正圖標，這是一個快速的方式我動態地改變圖標。請注意，通過「isDisabled」禁用處理程序仍然是必要的，否則即使未顯示圖標，如果單擊操作列，處理程序也會啓動。

Answer 5

伊夫使用如下的ExtJS的版本6.0.1和行之有效的。使用'getClass'配置。 返回應用於圖標圖像的CSS類的函數。

   { 
        xtype: 'actioncolumn', 
        flex: 1, 
        text: 'Action' 
        items: [{ 
         tooltip: 'Import', 
         getClass: function (value, meta, record) { 
         if(record.get('Name') == 'disable'){ 
          return 'x-hidden'; // when u want to hide icon 
         } 
         } 
         return 'x-grid-icon' ; // show icon 


        }] 
       }