定製ExtJs樹網格面板

Question

我正在使用ExtJs 4.1並希望利用ExtJs-TreeGrid。 請看電網here

我想下面的功能添加到該網格的例子：

1. 能夠禁用某些複選框。
2. 能夠隱藏複選框，當節點不是葉節點（檢查連接的圖像更多的瞭解）

Answer 1

見我的回答here。

要禁用某些複選框，您需要稍微更改渲染器/ processEvent方法。因爲我不知道你想禁用的檢查框，我就用一個虛擬的空間，您需要提供您的條件：

Ext.define('My.tree.column.CheckColumn', { 
    extend: 'Ext.ux.CheckColumn', 
    alias: 'widget.mytreecheckcolumn', 

    processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) { 
     if (record.isLeaf() && !record.get('disabled')) { 
      return this.callParent(arguments); 
     } 
     else { 
      return My.tree.column.CheckColumn.superclass.superclass.processEvent.apply(this, arguments); 
     } 
    }, 

    renderer : function(value, meta, record) { 
     if (record.isLeaf()) { 
      if (record.get('disabled')) { 
       meta.tdCls += ' ' + this.disabledCls; 
      } 
      return this.callParent([value, meta]); 
     } 
     return ''; 
    } 
}); 

還要注意，在默認情況下this.disabledCls是x-item-disabled，不會提供任何可見的變化到你的專欄。例如，如果你想改變一個殘疾人複選框的不透明度，您將需要提供自己的disabledCls

{ 
    xtype: 'mytreecheckcolumn', 
    dataIndex: 'active', 
    disabledCls: 'x-grid-cell-checkcolumn-disabled' 
} 

，並使用一些CSS：

.x-grid-cell-checkcolumn-disabled { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); 
    opacity: 0.3; 
}