Extjs4生成树

在本文中，我们将探讨如何使用ExtJS4生成树形结构以及实现动态加载功能。ExtJS4是一款强大的JavaScript库，特别适合构建富客户端应用，其中树组件（Tree）是其重要组成部分，用于展示层次化的数据。 让我们了解基本的HTML页面设置。在示例中，`index.html`是应用程序的入口点，它包含了必要的引用，如CSS样式表和JavaScript文件。`ext-all.css`是ExtJS的基础样式文件，`style.css`则是自定义的CSS，用于美化界面。`bootstrap.js`、`ext-lang-zh_CN.js`和`main.js`分别是ExtJS的启动脚本、中文语言包和自定义的JavaScript代码。 在`main.js`中，`Ext.require(['*'])`声明需要加载所有ExtJS库，确保所有组件和功能可用。`Ext.onReady`函数是当DOM完全加载后执行的回调，这是初始化应用的合适时机。 创建树组件的关键在于定义树的节点结构。在ExtJS4中，树节点通过`Ext.tree.Panel`或`Ext.tree.View`来创建。以下是一个简单的树结构示例： ```javascript var tree = Ext.create('Ext.tree.Panel', { title: '文件系统', width: 200, height: 250, renderTo: Ext.getBody(), store: { root: { text: '根节点', expanded: true, children: [ { text: '文件夹1', leaf: false }, { text: '文件夹2', leaf: false, children: [ { text: '子文件夹1' }, { text: '子文件夹2' } ]}, { text: '文件1.txt', leaf: true } ] } }, rootVisible: false, lines: false // 不显示连接线 }); ``` 树的动态加载通常涉及到服务器端的数据交互。在上述例子中，根节点的`children`属性直接包含了静态数据。然而，为了实现动态加载，我们可以使用`proxy`配置项，将数据源指向服务器。例如，使用`Ext.data.TreeStore`并配置`ajaxProxy`： ```javascript var treeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: 'getNodes.php', // 服务器端返回JSON数据的URL reader: { type: 'json', root: 'nodes' // JSON数据中的节点数组名 } }, autoLoad: true // 自动加载初始数据 }); var tree = Ext.create('Ext.tree.Panel', { ... store: treeStore, ... }); ``` 服务器端的`getNodes.php`应返回类似以下格式的JSON数据： ```json { "success": true, "nodes": [ { "text": "文件夹1", "expanded": true, "children": [ // 子节点数据... ] }, // 更多节点... ] } ``` 动态加载允许在需要时按需加载子节点，从而提高性能。可以通过监听`load`事件来处理加载过程中的交互： ```javascript treeStore.on('load', function(store, node, success, operation, eOpts) { if (success) { console.log('树节点已成功加载'); } else { console.error('加载失败'); } }); ``` 总结，使用ExtJS4生成树形结构涉及创建`Ext.tree.Panel`，定义节点数据，以及可能的动态加载配置。通过`proxy`和`reader`设置与服务器进行数据交互，实现按需加载。在实际应用中，还需要考虑用户交互，如节点的展开、折叠、添加、删除等操作，以及自定义图标和行为。通过熟练掌握这些知识点，你就能创建出功能丰富的树形组件。