extjs6 做一个从数据库拿数据做一个动态tree
时间: 2023-10-07 20:04:18 浏览: 60
可以使用ExtJs 6中的TreePanel和TreeStore来实现从数据库获取数据并生成动态树。首先需要定义一个TreeStore,用于从后端API获取数据,然后将数据加载到TreePanel中展示出来。
以下是一个简单的示例代码:
```
Ext.define('MyApp.store.TreeStore', {
extend: 'Ext.data.TreeStore',
alias: 'store.mytreestore',
autoLoad: true,
constructor: function(config) {
config = config || {};
config.root = {
id: 'root',
text: 'Root',
expanded: true,
};
config.proxy = {
type: 'ajax',
url: 'myapi/gettree',
};
this.callParent([config]);
}
});
Ext.define('MyApp.view.MyTreePanel', {
extend: 'Ext.tree.Panel',
alias: 'widget.mytreepanel',
store: {
type: 'mytreestore',
},
listeners: {
itemclick: function(view, record, item, index, e, eOpts) {
// do something when a node is clicked
}
}
});
```
在上面的代码中,我们首先定义了一个TreeStore,并重写了构造函数以设置根节点和代理,用于从后端API获取数据。然后,我们定义了一个TreePanel,将TreeStore绑定到它上面,并在必要时添加事件监听器。
你可以根据你的实际需求修改上面的代码并在你的应用程序中使用它来生成动态树。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)