extjs6 实现下拉树
时间: 2023-08-31 08:09:21 浏览: 98
要在 ExtJS 6 中实现下拉树,可以使用 ExtJS 的 Combo 组件和 TreePanel 组件结合起来。具体步骤如下:
1. 创建一个 Ext.form.field.ComboBox 组件,作为下拉框。
2. 设置 ComboBox 的 triggerAction 为 'all',以便在下拉框中显示所有可选项。
3. 创建一个 Ext.tree.Panel 组件,作为下拉树。
4. 设置 TreePanel 的 rootVisible 为 false,以隐藏根节点。
5. 将 TreePanel 添加到 ComboBox 的 picker 中。
6. 在 ComboBox 的 select 事件中,将选中节点的值设置为 ComboBox 的值。
下面是一个示例代码:
```javascript
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: '下拉树',
displayField: 'text',
valueField: 'id',
triggerAction: 'all',
store: Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: '节点1',
id: '1',
children: [{
text: '子节点1',
id: '11'
}, {
text: '子节点2',
id: '12'
}]
}, {
text: '节点2',
id: '2',
children: [{
text: '子节点3',
id: '13'
}, {
text: '子节点4',
id: '14'
}]
}]
}
}),
picker: {
xtype: 'treepanel',
rootVisible: false,
store: this.store
},
listeners: {
select: function(combo, record) {
combo.setValue(record.get('id'));
}
}
});
```