ext 樹(shù)是一種在 web 應(yīng)用程序開(kāi)發(fā)中經(jīng)常使用的交互式元素。它們可以提供可視化和可操作的樹(shù)結(jié)構(gòu)，使用戶更容易地瀏覽和操作數(shù)據(jù)。在 ext 樹(shù)中，可以輕松更改每個(gè)節(jié)點(diǎn)的圖標(biāo)。以下是如何在 ext 樹(shù)中更改節(jié)點(diǎn)圖標(biāo)的示例。

var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
listeners: {
itemclick: function(view, node) {
node.set('iconCls', 'my-icon'); //更改節(jié)點(diǎn)圖標(biāo)
}
},
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop', //啟用拖放插件
enableDrag: true,
enableDrop: true
}
}
});

在上面的示例中，我們創(chuàng)建了一個(gè) Ext.tree.Panel，并添加了一個(gè) itemclick 監(jiān)聽(tīng)器。每次單擊樹(shù)節(jié)點(diǎn)時(shí)，我們都可以更改節(jié)點(diǎn)的圖標(biāo)。在此示例中，我們將節(jié)點(diǎn)圖標(biāo)更改為名為“my-icon”的 CSS 類(lèi)。

值得注意的是，通過(guò)更改圖標(biāo) CSS 類(lèi)，可以靈活地控制節(jié)點(diǎn)的外觀。您可以根據(jù)自己的需要?jiǎng)?chuàng)建自己的 CSS 類(lèi)，以創(chuàng)建自定義圖標(biāo)。

此外，我們還添加了一個(gè) treeviewdragdrop 插件，啟用了拖放功能。這個(gè)插件使用戶能夠通過(guò)拖放節(jié)點(diǎn)來(lái)重新排列樹(shù)，從而使樹(shù)更易于操作。

總之，通過(guò)更改節(jié)點(diǎn)圖標(biāo)，我們可以更好地控制 ext 樹(shù)的外觀和交互性。這是一個(gè)簡(jiǎn)單但非常有用的技巧，可以使用戶更輕松地瀏覽和操作數(shù)據(jù)。