`
fireinjava
  • 浏览: 480168 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

Ext TreeCombo 树形 下拉框

    博客分类:
  • Ext
阅读更多

 

参考:http://www.extjs.com/forum/showthread.php?38654-Tree-in-a-Combo./page4

在别人基础上稍作修改

1.添加hiddenName,使传值时跟Ext.form.ComboBox类似;

2.设值时展开整棵树(在TreeCombo外实现),使弹出下拉框时默认选中节点;

 

代码如下:

/**
 * @version Base on Ext3.0
 * @class Ext.ux.TreeCombo
 * @extends Ext.form.TriggerField
 */

Ext.ux.TreeCombo = Ext.extend(Ext.form.TriggerField, {

	// triggerClass: 'x-form-tree-trigger',

	initComponent : function() {
		this.readOnly = true;
		Ext.ux.TreeCombo.superclass.initComponent.call(this);
		this.on('specialkey', function(f, e) {
					if (e.getKey() == e.ENTER) {
						this.onTriggerClick();
					}
				}, this);
		this.getTree();
	},

	onTriggerClick : function() {
		this.getTree().show();
		this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
	},

	getTree : function() {
		if (!this.treePanel) {
			if (!this.treeWidth) {
				this.treeWidth = Math.max(150, this.width || 200);
			}
			if (!this.treeHeight) {
				this.treeHeight = 200;
			}
			this.treePanel = new Ext.tree.TreePanel({
				renderTo : Ext.getBody(),
				loader : this.loader || new Ext.tree.TreeLoader({
							preloadChildren : (typeof this.root == 'undefined'),
							url : this.dataUrl || this.url
						}),
				root : this.root || new Ext.tree.AsyncTreeNode({
							children : this.children
						}),
				rootVisible : (typeof this.rootVisible != 'undefined')
						? this.rootVisible
						: (this.root ? true : false),
				floating : true,
				autoScroll : true,
				minWidth : 200,
				minHeight : 200,
				width : this.treeWidth,
				height : this.treeHeight,
				listeners : {
					hide : this.onTreeHide,
					show : this.onTreeShow,
					click : this.onTreeNodeClick,
					expandnode : this.onExpandOrCollapseNode,
					collapsenode : this.onExpandOrCollapseNode,
					resize : this.onTreeResize,
					scope : this
				}
			});
			this.treePanel.show();
			this.treePanel.hide();
			this.relayEvents(this.treePanel.loader, ['beforeload', 'load',
							'loadexception']);
			if (this.resizable) {
				this.resizer = new Ext.Resizable(this.treePanel.getEl(), {
							pinned : true,
							handles : 'se'
						});
				this.mon(this.resizer, 'resize', function(r, w, h) {
							this.treePanel.setSize(w, h);
						}, this);
			}
		}
		return this.treePanel;
	},

	onExpandOrCollapseNode : function() {
		if (!this.maxHeight || this.resizable)
			return; // -----------------------------> RETURN
		var treeEl = this.treePanel.getTreeEl();
		var heightPadding = treeEl.getHeight() - treeEl.dom.clientHeight;
		var ulEl = treeEl.child('ul'); // Get the underlying tree element
		var heightRequired = ulEl.getHeight() + heightPadding;
		if (heightRequired > this.maxHeight)
			heightRequired = this.maxHeight;
		this.treePanel.setHeight(heightRequired);
	},

	onTreeResize : function() {
		if (this.treePanel)
			this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?');
	},

	onTreeShow : function() {
		Ext.getDoc().on('mousewheel', this.collapseIf, this);
		Ext.getDoc().on('mousedown', this.collapseIf, this);
	},

	onTreeHide : function() {
		Ext.getDoc().un('mousewheel', this.collapseIf, this);
		Ext.getDoc().un('mousedown', this.collapseIf, this);
	},

	collapseIf : function(e) {
		if (!e.within(this.wrap) && !e.within(this.getTree().getEl())) {
			this.collapse();
		}
	},

	collapse : function() {
		this.getTree().hide();
		if (this.resizer)
			this.resizer.resizeTo(this.treeWidth, this.treeHeight);
	},

	// private
	validateBlur : function() {
		return !this.treePanel || !this.treePanel.isVisible();
	},

	setValue : function(v) {
		this.startValue = this.value = v;
		if (this.treePanel) {
			var n = this.treePanel.getNodeById(v);//位于一级以下节点要树全部展开时才可用
			if (n) {
				n.select();//默认选中节点
				this.setRawValue(n.text);
				if (this.hiddenField)
					this.hiddenField.value = v;
			}
		}
	},

	getValue : function() {
		return this.value;
	},

	onTreeNodeClick : function(node, e) {
		this.setRawValue(node.text);
		this.value = node.id;
		if (this.hiddenField)
			this.hiddenField.value = node.id;
		this.fireEvent('select', this, node);
		this.collapse();
	},
	onRender : function(ct, position) {
		Ext.ux.TreeCombo.superclass.onRender.call(this, ct, position);
		if (this.hiddenName) {
			this.hiddenField = this.el.insertSibling({
						tag : 'input',
						type : 'hidden',
						name : this.hiddenName,
						id : (this.hiddenId || this.hiddenName)
					}, 'before', true);

			// prevent input submission
			this.el.dom.removeAttribute('name');
		}
	}
});

 

示例:

1:选择页面,在定义了根节点的情况下逐级加载

 

var businessId = new Ext.ux.TreeCombo({
			fieldLabel : '业务名称',
			width : 120,
			allowBlank : false,
			//name : 'param.businessId',
			hiddenName : 'param.businessId',
			rootVisible : true,
			root : new Ext.tree.AsyncTreeNode({
						text : '业务列表',
						expanded : true,
						levelNum : 0,
						id : '100000'
					}),
			dataUrl : 'getChild_business.do?param.superId=100000'
		});

businessId.treePanel.on('beforeload', function(node) {
	businessId.treePanel.loader.dataUrl = 'getChild_business.do?param.superId='
			+ node.id;});
后台请求回来的数据如: [{text:'业务23',id:'200024'},{text:'业务2',id:'200043'}]


 

   

 2.显示并修改(expandAll后再setValue)

var businessId = new Ext.ux.TreeCombo({
			fieldLabel : '业务名称',
			width : 120,
			allowBlank : false,
			hiddenName : 'param.businessId',
			rootVisible : false,
			dataUrl : 'getAllJson_business.do'
		});

businessId.treePanel.on('load', function() {
			businessId.setValue('<s:property value="#param.businessId" />');
		});
businessId.treePanel.expandAll();

 

后台请求返回的json如:
[{
			"id" : 100000,
			"text" : "业务列表",
			"leaf" : false,
			"superId" : 0,
			"children" : [{

						"id" : 200024,
						"text" : "业务23",
						"leaf" : false,
						"superId" : 100000,
						"children" : [...略]
					}, {

						"id" : 200043,
						"text" : "业务2",
						"leaf" : false,
						"superId" : 100000,
						"children" : [...略]
					}]
		}]

 

 

 
3.只读(直接用Ext.form.ComboBox)

后台数据返回对应项即可
[{"value":"200043","display":"业务2"}]

 

 

 

 

----------------------2012-12-04-------补充个用静态树的例子---------备忘---------------------------

 

var childrenArrData = 
			[{  id:'-1',
			  text:'根节点',
			  value:'-1',
			  leaf:false,
			  children:[{id:'100',text:'测试',serialStart:'-1',leaf:false,children:[]}]
			 }];
						
						
var treeCombo = new Ext.ux.TreeCombo({
	fieldLabel : 'xx',
	width : 300,
	name : 'treeCombo',
	hiddenName : 'treeCombo',
	rootVisible : false,
	root:new Ext.tree.AsyncTreeNode({
	   id:"-1",   
	   text:"根节点", 
	   expanded:true,
	   leaf:false,
	   children: childrenArrData
	})
});
	
treeCombo.treePanel.on('click',function(node){
	alert(node.attributes.value);//取节点属性
});

//先展开,再设值。这样才会显示text值,不然会显示value去
function setTaskSerial(val){
	treeCombo.treePanel.expandAll();
	treeCombo.setValue(val);
}
   
function gettreeCombo(){
	return treeCombo.getValue();
}

   ----------------------2012-12-04-------补充只读不可编辑---------备忘---------------------------

	onTriggerClick : function() {
		if(!this.disabled){//modify 20121204
			this.getTree().show();
			this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
		}
	},
    在原来的基础上加个判断,这样treeCombo.disable();后点击下拉箭头就能不让下拉了。

 

  • 大小: 4.2 KB
  • 大小: 5.1 KB
  • 大小: 970 Bytes
3
4
分享到:
评论
7 楼 baayso 2013-04-07  
感谢!
6 楼 whatsgirl 2012-11-13  
能发个demo给我吗 或者加我QQ下 我想研究一下 6450915 多谢
5 楼 fireinjava 2012-11-12  
TreeCombo
本宫太傲 写道
html标签里是怎么调用显示的阿?》。。。

var cmp = new TreeCombo() ;
cmp.renderTo('divID')
...
你查下ext自带例子吧
4 楼 本宫太傲 2012-11-12  
html标签里是怎么调用显示的阿?》。。。
3 楼 zhylfhy 2011-12-14  
能否把demo的附件发上来,谢谢
2 楼 fireinjava 2011-02-22  
59471032 写道
能否把demo的附件发上来,学习下

你如果用Struts的话,直接在调用.do访问Action的方法
return "[{text:'业务23',id:'200024'},{text:'业务2',id:'200043'}]"即可
其它Ajax调用的类似。
1 楼 59471032 2011-02-21  
能否把demo的附件发上来,学习下

相关推荐

    TreeCombo,Ext TreeCombo 树形 下拉框,树形下拉框

    TreeCombo是Ext JS库中的一个组件,它结合了树形结构和下拉框的功能,为用户提供了一种在有限空间内展示复杂数据结构的选择方式。在Web应用开发中,这种组件非常实用,尤其当用户需要从层次化的选项中进行选择时。 ...

    EXT下拉框显示树形结构源代码

    而在某些情况下,我们可能需要在下拉框中展示树形结构的数据,这就是EXT COMBO TREE的用武之地。 EXT COMBO TREE是EXT COMBO的一种扩展,它允许用户在下拉菜单中以树形结构展示数据。这在处理层级关系或者分类数据...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    ext 下拉树 ext2

    下拉树是UI设计中一个实用的元素,它将传统下拉列表与树形结构相结合,用户在下拉框中可以看到层次化的选项,这在需要展示多级分类或者有层级关系的数据时非常有用。例如,在选择国家/地区、组织架构或产品分类等...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...

    Extjs中ComboBoxTree实现的下拉框树效果(自写)

    它是将传统的下拉框(ComboBox)和树形控件(Tree)结合起来的一种复合组件,用户可以从树形结构中选择某个节点,同时这个选择的动作会反映到下拉框上。这样的设计不仅节省空间,还能直观地展现层次关系。 从代码...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    ComboBoxTree是ExtJS4中的一个自定义组件,它结合了ComboBox(下拉框)和TreePanel(树形面板)的功能。ComboBox通常用于提供一个下拉列表供用户选择,而TreePanel则用于展示层次结构的数据。ComboBoxTree将这两者...

    Extjs 4.1 下拉框 Tree 的实现(mvc)

    ComboBox用于展示树状结构的选项,而Tree Panel则负责加载和显示实际的树形数据。 ```javascript var treeCombo = Ext.create('Ext.form.ComboBox', { fieldLabel: '连锁总店', queryMode: 'local', editable: ...

Global site tag (gtag.js) - Google Analytics