在项目中需要实现一个带树形结构的 ComboBox 下拉框。最终效果如下图所示。Extjs 原生组件不包含此功能，需要自行开发。参考网上现有实现并结合自身理解，封装成 Ext.ux.TreeCombo 组件，代码如下，可直接使用。 组件核心代码 复制代码 代码如下: Ext.ux.TreeCombo
Extjs ComboBoxTree实现下拉框树效果（自写）
作者：技术拾光
时间：2026-06-10
浏览：110
文章目录
在项目中需要实现一个带树形结构的 ComboBox 下拉框。最终效果如下图所示。Extjs 原生组件不包含此功能，需要自行开发。参考网上现有实现并结合自身理解，封装成 Ext.ux.TreeCombo 组件，代码如下，可直接使用。
组件核心代码
复制代码 代码如下:
Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {
constructor: function (cfg) {
cfg = cfg || {};
Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({
maxHeight: 300,
editable: false,
mode: 'local',
triggerAction: 'all',
rootVisible: false,
selectMode: 'all'
}, cfg));
},
store: new Ext.data.SimpleStore({
fields: [],
data: [[]]
}),
// 重写 onViewClick，展开树结点时不关闭下拉框
onViewClick: function (doFocus) {
var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
if (r) {
this.onSelect(r, index);
}
if (doFocus !== false) {
this.el.focus();
}
},
tree: null,
// 隐藏值
hiddenValue: null,
getHiddenValue: function () {
return this.hiddenValue;
},
getValue: function () { // 增加适用性，与原来 ComboBox 组件一致
return this.hiddenValue;
},
setHiddenValue: function (code, dispText) {
this.setValue(code);
Ext.form.ComboBox.superclass.setValue.call(this, dispText);
this.hiddenValue = code;
},
initComponent: function () {
var _this = this;
var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId
this.tpl = ""
this.tree = new Ext.tree.TreePanel({
border: false,
enableDD: false,
enableDrag: false,
rootVisible: _this.rootVisible || false,
autoScroll: true,
trackMouseOver: true,
height: _this.maxHeight,
lines: true,
singleExpand: true,
root: new Ext.tree.AsyncTreeNode({
id: _this.rootId,
text: _this.rootText,
iconCls: 'ico-root',
expanded: true,
leaf: false,
border: false,
draggable: false,
singleClickExpand: false,
hide: true
}),
loader: new Ext.tree.TreeLoader({
nodeParameter: 'ID',
requestMethod: 'GET',
dataUrl: _this.url
})
});
this.tree.on('click', function (node) {
if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') {
if (_this.fireEvent('beforeselect', _this, node)) {
_this.fireEvent('select', _this, node);
}
}
});
this.on('select', function (obj, node) {
var dispText = node.text;
var code = node.id;
obj.setHiddenValue(code, dispText);
obj.collapse();
});
this.on('expand', function () {
this.tree.render(tplRandomId);
});
Ext.ux.TreeCombo.superclass.initComponent.call(this);
}
})
Ext.reg("treecombo", Ext.ux.TreeCombo);
页面引入与使用
在主页中引入必要的 Extjs 类库文件，注意引入顺序和路径：
复制代码 代码如下:
其中 login.js 是业务逻辑文件，核心代码示例如下（完整代码请根据实际项目调整）：
复制代码 代码如下:
/* File Created: 五月 27, 2013 */
Ext.onReady(function () {
var _window = new Ext.Window({
title: "查询条件",
renderTo: Ext.getBody(),
frame: true,
plain: true,
buttonAlign: "center",
closeAction: "hide",
maximizable: true,
closable: true,
bodyStyle: "padding:20px",
width: 350,
height: 300,
layout: "form",
lableWidth: 110,
defaults: { xtype: "textfield", width: 180 },
// ... 此处省略窗口内的具体组件配置，实际使用时根据需求补充
});
});
实现原理与效果
以上代码即可实现如图所示的下拉框树效果。组件核心思路：基于 Ext.form.ComboBox 扩展，在展开时渲染一个 TreePanel 到下拉框的模板区域中，通过重写 onViewClick 避免展开树节点时关闭下拉框，同时监听树节点点击事件来设置隐藏值和显示文本。
实用工具推荐
电子包浆
使用 ›绿化、压缩、噪点和虚拟水印，自由调节做旧程度。
图片压缩
使用 ›选择画质和输出格式，预览压缩前后的大小。
相关文章