ExtJS6 TreePanel树节点合上展开显示不同图标

介绍

ExtJS是一个用于构建跨平台富应用程序的开源JavaScript框架。它提供了丰富的UI组件和工具，其中包括TreePanel组件，用于显示树形结构的数据。

在ExtJS6中，TreePanel组件允许我们为树节点定义不同的图标，以便在节点被合上或展开时显示不同的状态。这为用户提供了更直观的交互体验。

本篇博客将介绍如何使用ExtJS6中的TreePanel组件来实现树节点的合上展开，并在不同状态下显示不同的图标。

步骤

步骤一：准备数据

首先，我们需要准备一些模拟的树型数据。可以使用Ext.data.TreeStore来管理数据。以下是一个简单的示例：

var treeStore = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: '节点1', leaf: true },
            { text: '节点2', expanded: true, children: [
                { text: '子节点1', leaf: true },
                { text: '子节点2', leaf: true }
            ]},
            { text: '节点3', leaf: true }
        ]
    }
});

步骤二：创建TreePanel

接下来，我们需要创建一个TreePanel组件，并将数据绑定到TreeStore。还需设置节点展开和合拢时的图标。

var treePanel = Ext.create('Ext.tree.Panel', {
    store: treeStore,
    rootVisible: false,
    
    viewConfig: {
        listeners: {
            beforeitemexpand: function(node) {
                node.set('iconCls', 'x-fa fa-folder-open');
            },
            beforeitemcollapse: function(node) {
                node.set('iconCls', 'x-fa fa-folder');
            }
        }
    }
});

在上述代码中，我们通过beforeitemexpand和beforeitemcollapse事件来监听节点的展开和合拢操作。在节点展开时，我们更新节点的iconCls属性为'x-fa fa-folder-open'，在节点合拢时，我们更新节点的iconCls属性为'x-fa fa-folder'。

步骤三：渲染TreePanel

最后，我们需要将TreePanel渲染到页面上指定的容器中。

treePanel.render('tree-container');

结论

通过使用ExtJS6的TreePanel组件，我们可以很容易地实现树节点的合上展开，并根据不同的状态显示不同的图标。这提供了更直观和易于使用的用户界面。

希望本篇博客对您有所帮助！