如何在Ext4中將css類添加到樹節點？

我想突出顯示Ext.tree.Panel中的一些節點。如何在Ext4中將css類添加到樹節點？

// add a class with to highlight the node 
myTreeNode.getUI().addClass('highlightclass'); 

// remove the class to remove the highlighting 
myTreeNode.getUI().removeClass('highlightclass');

什麼是的ext4等價的：

在Ext3中，我加入了類樹節點的UI對象來實現這一點？我已經能夠通過設置我的節點模型的iconCls字段來更改圖標，但我真的很想能夠設置一個允許我突出顯示整個節點的類。

來源

2012-06-15 alexwells

下面是答案我發現我自己的問題：

// add a css class to a specific tree node 
myTreePanel.getView().addRowCls(myTreeNode,'highlightclass'); 

// remove a css class from a specific tree node 
myTreePanel.getView().removeRowCls(myTreeNode,'highlightclass');

來源

2012-07-03 15:28:27 alexwells

絕對是您的場景的更好解決方案。 – Reimius

工程就像一個魅力，謝謝！ – Monsignor

我發現這個班級每次父母被展開或摺疊時都消失 – WendyG

要做到這一點，您需要將樹看成是一棵樹。爲只有一列的樹設置一個列定義，隱藏列的標題並向該列添加一個呈現器。

後，你可以與你的高亮行定義的CSS類，並可能是一個屬性上該行模型告訴哪些行應強調的定義，像這樣的渲染：

renderer: function(value, metaData){ 
    if (whatever you want here as a condition) { 
     metaData.tdCls = "x-grid-row-alt-mine"; 
    } 
    return value; 
}

來源

2012-07-02 19:21:47 Reimius

當我試圖實現這一點，我失去了所有的樹缺口，但在調查它，我偶然在我結束了使用的解決方案。謝謝你的幫助。 – alexwells

我的代碼稍微複雜一些，我可以看到爲什麼你用這段代碼丟失了縮進。 – Reimius

請說明。 – bmargulies

雖然選擇的答案可能工作，在我的版本的ExtJS（4.0.7）的，只要我展開或在我的樹面板摺疊節點CSS類都復位。我認爲，解決這個問題的更持久的方法是

myTreeNode.set('cls', 'highlightclass');

這將你的類添加到特定的樹節點的td.x網格單元DOM元素。

希望幫助

來源

2014-08-18 22:57:12 macguru2000

我同意這是ExtJS 4.x的最佳解決方案，但對於版本5也存在一個問題：懸停在擴展器箭頭上，該類被覆蓋 – qdev

知道了@qdev我還沒有處理ExtJS的樂趣5還沒有。 – macguru2000

這裏是我已經打開的一個錯誤報告。它還包括一個小提琴：http://www.sencha.com/forum/showthread.php?291787-cls-overriden-by-expander-arrow-hover-in-treePanel – qdev

如何在Ext4中將css類添加到樹節點？

回答

相關問題