本文共 7196 字，大约阅读时间需要 23 分钟。

2：网上发现这样的例子不多，有一个是iteye上面写的，地址为。经过测试这个里面有几个问题所在，并且有几个作者也没有说明白杂用，经过修改可以用了。

3：发个实例代码：

new Ext.ux.ComboBoxTree({     fieldLabel : '父菜单',     hiddenName : 'testTreeName',     value : 11,     height : 180,     width : 200,     dataUrl : PATH       + '/do.php?mod=util&action=query_parent_department_tree',     nodePathUrl : PATH       + '/do.php?mod=util&action=query_department_path&id=11',     rootVisible : false,     rootSelectable : false,     showFullPath : false,     allowBlank : false,     emptyText : '请选择'    })

其中hiddenName 是post过去的字段

dataUrl就是生成一般的树的路径了，这个都和平时一样，不一样的地方时多了个nodePathUrl，看这个我的例子中我给初始化的value为11，这个节点在我数据库中对应的父亲节点只推到最上的路径分别为/root/8/7/11  也就是说这个节点从刚才的路径利用treepanel的selectPath方法直接找到这个节点，然后把这个节点text对应到combo中，把value设置给name。之前这个问题是里面有个路径问题不可以找到，还有个地方时一个cu的函数的封装，cu函数就是请求nodePathUrl的。里面还有个问题是如果当前tree中没有root节点的话是对应不到的，总之我给修整好是可以用了，大家看源代码：

/** * 自定义下拉树，支持初始化值时自动定位树节点。 还没有考虑性能问题。继承自Ext.form.ComboBox也很浪费。 * 代码中的cu.get()是自定义的异步请求方法。 *//* * 例子 new Ext.ux.ComboBoxTree({ fieldLabel:'父菜单', hiddenName: 'parentId', value: * this.modifyId ? '' : this.parentMenu.id, height: 180, dataUrl: * 'sys/menu/getMenus.do', 就是获取一般tree的url nodePathUrl: * 'sys/util/getEntityIdPath.do?c=sys.entity.Menu',获取需要默认选中的那个节点的路径parentId/parentId/.../被选中节点的id * root: {id:'root', text:'根菜单', expanded: true}, rootVisible: true, * rootSelectable: true, rootValue: null, showFullPath: true, allowBlank: false, * }); *//** * @author Linzongxue * @create_date 2011-12-13 */Ext.ux.ComboBoxTree = Ext.extend(Ext.form.ComboBox, {	// 树的配置项	dataUrl : null, // 获取树所有节点的url	// 通过id获取某个节点的id全路径的url，返回值的格式应该是：parentId1/parentId2/parentId3/../节点id	// 如果不设置这个值，下拉树不会自动定位节点并在初始化时显示文本	nodePathUrl : null,	loader : null,	root : {},	rootVisible : false,	// 树的选择模式	rootSelectable : false, // 根节点是否可选，默认为false	folderSelectable : true, // 目录是否可选，默认为true	leafSelectable : true, // 叶子是否可选，默认为true	showFullPath : false, // 是否显示全路径	rootValue : undefined, // 根节点的值（通常根节点的取值与普通节点的取值不一样，如果一样则不需要设置此值）	// 原combo类的配置项	store : new Ext.data.SimpleStore({				fields : [],				data : [[]]			}),	mode : 'local',	triggerAction : 'all',	editable : false,	forceSelection : true,	tree : null, // 树控件，在expand方法中初始化	// private: 用于防止combo收缩，在树的事件中控制此属性值	preventCollapse : false,	initComponent : function() {		this.treeId = Ext.id();		this.height = this.height || 200;		this.tpl = String.format(				'
   
    
   ',				this.treeId, this.height);		Ext.ux.ComboBoxTree.superclass.initComponent.call(this);	},	setValue : function(value) {		if (Ext.isObject(value)) { // 点击树节点时的选择			this.doSetValue(value);		} else { // 只是设置一个值，从后台获取这个值的路径，并在树中选中这个节点			if (!this.tree)				this.initTree();			if (value === this.tree.root.id					|| (Ext.isDefined(this.rootValue) && value === this.rootValue)) { // 根节点				this.tree.root.select();				this.doSetValue(this.root);				return;			}			var url = this.nodePathUrl;			if (!url) {				this.doSetValue({							id : value						});				return;			}			Ext.Ajax.request({						url : url,						async : false,						scope : this,						success : function(resp, opts) {							var comboTree = this;							path = resp.responseText;							path = (path.indexOf('/') == 0 ? '' : '/')									+comboTree.tree.root.id+'/'+ path;							this.tree.selectPath(path, 'id', function(success,											node) {										comboTree.doSetValue(success												? node												: null);									});						},						faliure : function() {							alert(3)						}					});			/*			 * cu.get(url, {id: value}).done(function(path){//从后台发起请求获取id路径 path =			 * '/' + this.root.id + (path.indexOf('/') == 0 ? '' : '/') + path;			 * var comboTree = this; this.tree.selectPath(path, 'id',			 * function(success, node){ comboTree.doSetValue(success ? node :			 * null); }); }, this);			 */		}	},	// private:设置值，参数value应该是一个对象	doSetValue : function(value) {		var id = value ? value.id : '';		var text = value ? value.text : '';		if (value && (value.loader || value.attributes)) { // 是树节点			var isRootNode = (value.id == this.tree.root.id);			if (isRootNode && Ext.isDefined(this.rootValue)) {				id = this.rootValue;			}			if (this.showFullPath) {				text = isRootNode ? '/' : value.getPath('text').replace(						'/' + this.tree.root.text, '');			}		}		this.value = id;		if (this.hiddenField) {			this.hiddenField.value = id; // 设置表单域		}		this.lastSelectionText = text;		this.el.dom.value = text; // 显示的值		this.fireEvent('select', this, value);	},	getValue : function() {		return Ext.isDefined(this.value) ? this.value : '';	},	// 取得选中的树节点	getValueNode : function() {		return this.tree				? this.tree.getSelectionModel().getSelectedNode()				: null;	},	getText : function() {		return this.lastSelectionText || '';	},	reload : function() {		if (!this.tree)			return;		var node = this.tree.getSelectionModel().getSelectedNode();		var path = node ? node.getPath() : null;		this.tree.getLoader().load(this.tree.root, function() {					if (path) {						this.tree.selectPath(path);					}				}, this);		this.preventCollapse = true;	},	// private: 根据preventCollapse属性判断是否要收缩	collapse : function() {		if (this.preventCollapse) {			this.preventCollapse = false;			return;		}		Ext.ux.ComboBoxTree.superclass.collapse.call(this);	},	// private:	expand : function() {		Ext.ux.ComboBoxTree.superclass.expand.call(this);		if (!this.tree) {			this.initTree();		}	},	// private:	destroy : function() {		if (this.tree && this.tree.rendered)			this.tree.destroy();		Ext.form.ComboBox.superclass.destroy.call(this);	},	// private	initTree : function() {		if (!this.list) { // 必须先初始化列表，在一开始就设置了combotree的值时尤其重要，发现这个问题花了半天时间			this.initList();		}		// 设置this.preventCollapse=true，防止combo收缩		var enableCollapse = function() {			this.preventCollapse = false;		};		// 设置this.preventCollapse=false，允许combo收缩		var disableCollapse = function() {			this.preventCollapse = true;		};		this.tree = new Ext.tree.TreePanel({					renderTo : this.treeId,					useArrows : false,					autoScroll : true,					height : this.height, // 修复IE的bug					animate : true,					enableDD : false,					containerScroll : true,					border : false,					dataUrl : this.dataUrl,					loader : this.loader,					root : this.root,					rootVisible : this.rootVisible,					// bbar:[					// '->', {text: '刷新', handler: this.reload, iconCls:					// 'icon-refresh', scope: this} //由于宽度问题取消此功能					// ],					listeners : {						click : function(node) {							disableCollapse();							if (node == this.tree.root) { // 选中根节点								if (!this.rootSelectable)									return;							} else if (!node.isLeaf()) { // 选中目录节点								if (!this.folderSelectable)									return;							} else { // 选中叶子节点								if (!this.leafSelectable)									return;							}							// 先选择节点，再设置value，让getNodeValue方法在select事件中取到正确的值							node.select();							this.setValue(node);							enableCollapse();						},						// 展开和收缩节点时防止combo收缩						beforeexpandnode : disableCollapse,						beforecollapsenode : disableCollapse,						beforeload : disableCollapse,						// 节点加载和展开后允许combo收缩						load : enableCollapse,						expandnode : enableCollapse,						scope : this					}				});	}});Ext.reg('combotree', Ext.ux.ComboBoxTree);

转载地址：http://qaini.baihongyu.com/