JavaScript的ExtJS框架中数面板TreePanel的使用实例解析

一、什么是TreePanel

Tree Panel 是 ExtJS 中常用的一种 UI组件，它能够以树形结构的方式展示数据，并提供了一些便捷的交互方式来操作数据。我们经常在左侧菜单栏中看到这种组件。

二、TreePanel的基本配置

• root：树的根节点。
• store：数据仓库，存储树的数据。
• animate：是否启用动画效果。
• border：是否添加边框。
• width、height：宽度和高度等。

下面是一个最基本的 TreePanel 配置：

Ext.create('Ext.tree.Panel', {
    title: 'MyTree',
    width: 200,
    height: 150,
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root',
            expanded: true,
            children: [
                {
                    text: 'Child 1',
                    leaf: true
                },
                {
                    text: 'Child 2',
                    leaf: true
                }
            ]
        }
    }),
    renderTo: Ext.getBody()
});

三、TreePanel的事件

• itemclick：叶子节点单击事件。
• itemdblclick：叶子节点双击事件。
• itemcontextmenu：叶子节点右键菜单事件。
• itemmousedown：叶子节点鼠标按下事件。
• itemmouseup：叶子节点鼠标松开事件。
• itemexpand：节点展开事件。
• itemcollapse：节点折叠事件。

四、TreePanel的方法

• getRootNode()：获取根节点。
• getNodeById(id)：根据 id 获取节点。
• expandAll()：展开所有节点。
• collapseAll()：折叠所有节点。

五、示例说明

示例1：TreePanel创建并展示

下面是一个创建一个 TreePanel 并显示的例子：

Ext.create('Ext.tree.Panel', {
    title: 'MyTree',
    width: 200,
    height: 150,
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root',
            expanded: true,
            children: [
                {
                    text: 'Child 1',
                    leaf: true
                },
                {
                    text: 'Child 2',
                    leaf: true
                }
            ]
        }
    }),
    listeners: {
        itemclick: function(view, record, item, index, e) {
            console.log('click ' + record.get('text'));
        }
    },
    renderTo: Ext.getBody()
});

示例2：通过ajax请求获取数据并动态加载

如果需要从后台服务获取数据并动态加载 TreePanel，则需要使用 AjaxProxy 进行数据请求。下面是一个通过后台服务获取数据并动态加载的例子：

Ext.create('Ext.tree.Panel', {
    title: 'MyTree',
    width: 200,
    height: 150,
    renderTo: Ext.getBody(),
    store: Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'http://example.com/getdata',//这里替换成自己的后台服务地址
            reader: 'json'
        },
        root: {}
    }),
    listeners: {
        itemclick: function(view, record, item, index, e) {
            console.log('click ' + record.get('text'));
        },
        load: function(store, records, successful) {
            console.log('Load');
        }
    },
    rootVisible: false
});

注意：这里需要在前端代码中将后台请求的地址改为自己的实际地址。

六、总结

通过本文的介绍，我们了解了 TreePanel 的基本配置、事件、方法以及示例代码。虽然 ExtJS 中的 TreePanel 有很多参数可供选择，但仅凭这些基础实现，足以完成常见的树形文件列表、菜单等需求。如果需要更高级的功能，可以根据官方文档的说明进行使用。