实现Extjs ComboBox Tree

最新推荐文章于 2024-09-03 10:25:33 发布

ggpp224

最新推荐文章于 2024-09-03 10:25:33 发布

阅读量185

点赞数

分类专栏： Extjs 文章标签： EXT QQ HTML

Extjs 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用ExtJS的ComboBox组件结合自定义模板机制，实现一个下拉列表显示为树形结构的功能。通过监听事件展开树并选择节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现下拉列表中选项为tree,利用combobox提供的模版机制，在html中构
造一个div，然后将树组件放入这个div中。如下：


//构造下拉列表中的模板
var comTpl = new Ext.XTemplate(
	'<div id="comview"></div>'
);

//combobox
var urlBar = new Ext.form.ComboBox({
			region:'center',
			store:new Ext.data.SimpleStore({fields:

[],data:[[]]}),
			tpl:comTpl,
			forceSelection:true,
			triggerAction: 'all',
			typeAhead: true,
			mode: 'local'
});

//监听下拉列表展开事件
urlBar.on('expand',this.urlBarExpand);		
//监听下拉列表收起事件
comTree.on('click',this.nodeClick);

urlBarExpand:function(){
		comTree.render('comview');
		comTree.expandAll();
	},
nodeClick:function(node){
		urlBar.setValue(node.text);
	}