EXT是Sencha公司开发的一款强大的JavaScript前端框架，用于构建富客户端Web应用。它提供了一整套组件化的UI元素，使得开发者能够轻松创建出美观且功能丰富的网页应用。在EXT中，TreePanel是一种特殊的面板，用于展示层次结构的数据，通常表现为树形结构。TreePanel在各种需要展示层级关系的应用场景中非常常见，如文件系统、组织架构或者分类目录等。
**TreePanel基本使用**
1. **创建TreePanel**
创建TreePanel首先需要实例化一个`Ext.tree.Panel`对象，并配置相应的属性。例如，设置标题、宽度、高度等基本信息：
```javascript
var treePanel = Ext.create('Ext.tree.Panel', {
title: '文件系统',
width: 200,
height: 300,
renderTo: Ext.getBody(), // 渲染到body
store: myTreeStore, // 使用的store
rootVisible: true // 是否显示根节点
});
```
2. **TreeStore与数据**
TreePanel的数据由`Ext.data.TreeStore`（简称TreeStore）管理。TreeStore需要配置`fields`定义节点数据结构，并通过`root`配置项设置根节点。例如：
```javascript
var myTreeStore = Ext.create('Ext.data.TreeStore', {
fields: ['name', 'size', 'date'],
root: {
text: '根节点',
expanded: true, // 是否默认展开
children: [
// 子节点数据
]
}
});
```
3. **Column配置**
TreePanel的列可以通过`columns`配置项自定义。每个列对应一个`Ext.grid.column.Column`对象，包含字段名、标题、宽度等属性：
```javascript
columns: [{
xtype: 'treecolumn', // 特殊的列类型，用于显示树结构
text: '文件名',
width: 200,
dataIndex: 'name' // 对应数据字段
}, {
text: '大小',
width: 80,
dataIndex: 'size'
}, {
text: '日期',
width: 120,
dataIndex: 'date'
}]
```
4. **节点操作**
TreePanel支持对节点的增删改查操作。例如，添加子节点：
```javascript
var newNode = {
text: '新节点',
leaf: true // 如果是叶子节点，设为true
};
var parentNode = treePanel.getRootNode(); // 获取根节点
parentNode.appendChild(newNode); // 添加子节点
```
5. **事件监听**
TreePanel提供了丰富的事件监听，如`itemclick`、`itemexpand`、`itemcollapse`等。监听事件可以处理用户的交互行为：
```javascript
listeners: {
itemclick: function(view, record, item, index, e) {
console.log('点击了节点：', record.get('name'));
}
}
```
6. **加载远程数据**
TreePanel可以配合Ajax或JsonP从服务器动态加载数据。使用`proxy`配置项定义数据源，`load`方法用于异步加载：
```javascript
proxy: {
type: 'ajax',
url: 'tree_data.json', // JSON格式的数据源
reader: {
type: 'json',
rootProperty: 'nodes' // JSON数据中的根节点属性名
}
},
store.load();
```
通过以上内容，我们了解了EXT中TreePanel的基本使用，包括它的创建、数据管理、列配置、节点操作和事件监听。实际应用中，开发者可以根据需求灵活配置和扩展，以实现更复杂的树形视图功能。
TreePanel基本使用.rar （1个子文件） 
TreePanel基本使用.doc 75KB
