extjs6 做一个从数据库拿数据做一个tree
时间: 2023-10-08 21:11:55 浏览: 85
Extjs 加载数据库 生成tree
5星 · 资源好评率100%
你好,感谢您的提问。您可以使用ExtJS6中的TreePanel和Store组件来从数据库中获取数据并显示为树形结构。具体步骤如下:
1. 首先,在ExtJS6的模型中定义数据模型并配置数据源:
```javascript
Ext.define('TreeModel', {
extend: 'Ext.data.Model',
fields: [{name: 'text', type: 'string'}],
proxy: {
type: 'ajax',
url: 'your_data_url',
reader: {
type: 'json'
}
}
});
```
2. 创建Store组件:
```javascript
var store = Ext.create('Ext.data.TreeStore', {
model: 'TreeModel',
autoLoad: true,
root: {
expanded: true
}
});
```
3. 创建TreePanel组件并指定Store组件作为数据源:
```javascript
Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
width : 400,
height: 300,
title: 'Tree Panel',
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1
}]
});
```
以上代码中,我们创建了一个TreePanel组件,指定了TreeStore作为数据源,展示从数据库中获取的数据,其中autoLoad参数表示自动加载数据,并且指定了根节点为默认展开状态。
希望这个答案能够帮助到您。如果您有任何其他问题,请随时问我。
阅读全文