Extjs自定義TreeGrid行CSS

有沒有辦法在樹網格的子級別上應用替代行CSS？Extjs自定義TreeGrid行CSS

目前treePanel viewConfig上的stripeRows配置只是使所有內容都變成灰色和白色，但很難區分子行與父行。

理想情況下，我想讓父對象以一種方式交替顏色，而子行以另一種方式交替顏色。

我正在考慮使用「getRowClass」方法手動更新行類來編寫函數。我想知道是否有更清潔的方式。

來源

2012-07-10 Babyangel

相信我，解決這個可能是方式更復雜你想要處理。如果你的要求允許，在DmitryB的例子中使用圖像是最好的選擇。 – Reimius 2012-07-12 21:48:20

我可以提供解決方案來做到這一點，雖然如果你真的需要它。 – Reimius 2012-07-13 14:55:59

圖標不符合我目前的要求。如果你已經有一個工作的例子，我很樂意看到它！ – Babyangel 2012-07-13 16:07:58

我在模型上使用了iconCls屬性來通過圖標區分行。這不僅有助於分離父/子行，而且還有子行本身。

我使用的模型映射把戲給我不同的行類型的值是這樣的：

{name:'iconCls', mapping:'type.name'}

，然後還加了CSS類，以支持不同類型的名稱：

.cables, .Cable { 
    background-image: url(../images/silk/cables.jpg) !important; 
}

希望這有助於。

來源

2012-07-11 01:15:00 dbrin

getRowClass看起來不錯，可以執行行屬性更改。你可以得到一個節點的深度與getDepth（）函數：

var grid = Ext.create ('Ext.tree.Panel', { 
    xtype: 'tree-grid', 
    viewConfig: { 
     getRowClass: function(record, rowIndex, rowParams, store) { 
      return 'node-depth-' + record.getDepth() 
     } 
    } 
...

，並使用CSS：

.node-dept-1 .x-grid-cell { 
    background-color: white; 
} 
.node-depth-2 .x-grid-cell { 
    background-color: #dddddd; 
} 
...

發現的解決方案here

來源

2014-05-14 20:33:31 GregW

Extjs自定義TreeGrid行CSS

回答

相關問題