ExtJs 3 自定义combotree

最新推荐文章于 2017-04-06 09:38:22 发布
最新推荐文章于 2017-04-06 09:38:22 发布
阅读量107 收藏
点赞数
文章标签： ux javascript ViewUI
原文链接：http://www.cnblogs.com/zhwl/p/3851663.html
版权

ExtJs 3 自定义combotree

/**
 * 自定义下拉树，支持初始化值时自动定位树节点。
 * 还没有考虑性能问题。继承自Ext.form.ComboBox也很浪费。
 * 代码中的cu.get()是自定义的异步请求方法。
 * @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('<tpl for="."><div id="{0}" style="height:{1}px"></div></tpl>', this.treeId, this.height);
		Ext.ux.ComboBoxTree.superclass.initComponent.call(this);
	},
	setValue: function(value){
		if (Ext.isObject(value)){ //点击树节点时的选择
			this.doSetValue(value);
		}
		else{ //只是设置一个值，从后台获取这个值的路径，并在树中选中这个节点
			//console.log(value);
			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;
			}
			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);

/****************  下面是一个使用例子  ***********************/
new Ext.ux.ComboBoxTree({
	fieldLabel:'父菜单',
	hiddenName: 'parentId',
	value: this.modifyId ? '' : this.parentMenu.id,
	height: 180,
	dataUrl: 'sys/menu/getMenus.do',
	nodePathUrl: 'sys/util/getEntityIdPath.do?c=sys.entity.Menu',
	root: {id:'root', text:'根菜单', expanded: true},
	rootVisible: true,
	rootSelectable: true,
	rootValue: null,
	showFullPath: true,
	allowBlank: false,
});
1 楼 chuanmeiwc 2011-12-29  
cu.get这个方法能不能一并贴出来呢？
2 楼 chuanmeiwc 2011-12-29  
chuanmeiwc 写道
cu.get这个方法能不能一并贴出来呢？

这个问题可以忽略了，还有个问题想请教下：
如果llowBlank设置为true，选中某个节点之后想清空值怎么办呢？
3 楼 chuanmeiwc 2011-12-30  
chuanmeiwc 写道
chuanmeiwc 写道
cu.get这个方法能不能一并贴出来呢？

这个问题可以忽略了，还有个问题想请教下：
如果llowBlank设置为true，选中某个节点之后想清空值怎么办呢？

我的解决办法是在构造tree的时候增加一个带有清除按钮的tbar： 

var combo = this;
    	this.tree = new Ext.tree.TreePanel({
    		renderTo: this.treeId,
    		useArrows: false,
    	    autoScroll: true,
    	    height: this.height,  //fix IE
    	    animate: true,
    	    enableDD: false,
    	    containerScroll: true,
    	    border: false,
			dataUrl: this.dataUrl,
			[color=red]tbar: [{text:'清空',xtype:'button',iconCls:'reset',handler:function(){combo.setValue(null);}}],[/color]
			loader: this.loader,
			root: this.root,
			rootVisible: this.rootVisible


还有没有更好的解决办法呢？
另外还有个问题：
获取某个节点的值时只能用 Ext.getCmp('comboboxtree').getNodeValue().id 吗？我试了getValue()和getRawValue()，均不能获取到节点的id。但是使用这个方法获取节点id有个问题，只有点击了comboBox之后，才会异步获取树，因此没有点击过comboBox的时候，Ext.getCmp('comboboxtree').getNodeValue()的值为null，所以使用Ext.getCmp('comboboxtree').getNodeValue().id之前要先判断Ext.getCmp('comboboxtree').getNodeValue()是否为null，否则会报错。
这个问题你有别的办法解决吗？
4 楼 chuanmeiwc 2011-12-30  
chuanmeiwc 写道

如果allowBlank设置为true，选中某个节点之后想清空值怎么办呢？


我的解决办法是在构造tree的时候增加一个带有清除按钮的tbar：

var combo = this;
    this.tree = new Ext.tree.TreePanel({
    renderTo: this.treeId,
    useArrows: false,
        autoScroll: true,
        height: this.height,  //fix IE
        animate: true,
        enableDD: false,
        containerScroll: true,
        border: false,
dataUrl: this.dataUrl,
tbar: [{text:'清空',xtype:'button',iconCls:'reset',handler:function(){combo.setValue(null);}}],
loader: this.loader,
root: this.root,
rootVisible: this.rootVisible

还有没有更好的解决办法呢？
另外还有个问题：
获取某个节点的值时只能用 Ext.getCmp('comboboxtree').getNodeValue().id 吗？我试了getValue()和getRawValue()，均不能获取到节点的id。但是使用这个方法获取节点id有个问题，只有点击了comboBox之后，才会异步获取树，因此没有点击过comboBox的时候，Ext.getCmp('comboboxtree').getNodeValue()的值为null，所以使用Ext.getCmp('comboboxtree').getNodeValue().id之前要先判断Ext.getCmp('comboboxtree').getNodeValue()是否为null，否则会报错。
这个问题你有别的办法解决吗？
5 楼 zxlaiye 2011-12-31  
chuanmeiwc 写道
chuanmeiwc 写道
cu.get这个方法能不能一并贴出来呢？

这个问题可以忽略了，还有个问题想请教下：
如果llowBlank设置为true，选中某个节点之后想清空值怎么办呢？


这个。。还没有考虑  ，因为才开始使用ExtJs没多久，很多应用细节还没机会去尝试。我觉得你的方法也挺好了，添加“清空”的同时顺便再加上一个“刷新”树节点的控制都不错。
6 楼 zxlaiye 2011-12-31  
to chuanmeiwc

在我贴代码之后又做了一些修改，但是修改后没有及时更新上来，太多事情要处理了啊。。。
你说的通过getValue()取不到值的问题，很可能是之后解决的，不用getNodeValue().id那么麻烦。。。，另外，异步发送请求的方法cu.get(...).done(...)只是对Ext.ajax.request做了简单的封装，并且添加了全局的异常处理而已。这种写法是从jquery里学过来的，我还摆脱不了一些jquery的使用习惯。
7 楼 chuanmeiwc 2011-12-31  
getValue()咋修改的呢？
8 楼 zxlaiye 2011-12-31  
chuanmeiwc 写道
getValue()咋修改的呢？

getValue()方法只是简单地返回this.value，关键是doSetValue()方法中对value的设置。现在是不是可以取到正确的值了？如果是就应该是之前的doSetValue()方法有问题，具体修改了什么地方我想不起来了。。。太久了。。
9 楼 silence1214 2012-03-15  
哥们 这个value的值死活出来不了
10 楼 silence1214 2012-03-15  
哥，这个例子中当一个页面多次操作的时候会把上次的数据附加到这里来，比如之前树中只有1,2在打开就是1,2,1,2 只有点刷新 才可以 这是怎么回事啊，我死活找不到修改的地方
11 楼 silence1214 2012-03-16  
经过昨晚一夜奋战，上午奋战。发现那个root一定要配置 哪怕是不需要。否则问题一大堆。。。

转载于:https://www.cnblogs.com/zhwl/p/3851663.html

Surenon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Extjs4.X下comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用
10-23
Extjs4 comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用。来源于网络，稍作修改。
Extjs comboboxtree
wzs298的专栏
04-22 7118
Extjs5.1版本，由于版本之间的差异过大，导致3.3上的ComboTree组件在5.1上用不了。 虽说在网上能找到一些可用的ComboboxTree组件，但是功能都不能满足我们的需求，于是自己重新写一个。 主要实现的功能如下： 1、单选/多选模式； 2、节点的选择方式：     2.1、all:所有结点都
EXTJS下拉树ComboBoxTree参数提交及回显方法
weixin_34363171的博客
07-17 356
http://blog.csdn.net/wjlht/article/details/6085245 使用extjs可以构造出下拉数，但是不方便向form提交参数，在此，笔者想到一个办法，很方便ComboBoxTree向form提交。 原理： 在form中增加一个隐藏的字段，当在comboBoxTree中选定值后自动在隐藏字段中赋值。 为实现此方法，需要重载comboBoxTree中col...
扩展extjs ComboBoxTree组件
QC班长的博客
04-06 1837
/** * Created by QC on 2017/3/30. */ // 封装的ComboBoxTree组件 ComboBoxTree = Ext.extend(Ext.form.ComboBox, { fieldLabel : 'ComboBoxTree',// 标题名称 baseUrl : null, emptyText : null, maxHeig
Extjs4.2自定义ComboTree
03-19
Extjs4.2自定义ComboTree
ExtJS如何自定义图片按钮组件
02-02
1.ExtJS自定义组件，图片按钮为例. 2.此图片按钮背景完全为图片，没有边框，需要使用者提供2张图片，一张初始化用，一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
Extjs Combotree
11-27
基于Extjs前端技术框架，自定义combotree（下拉树）；传入符合json tree格式的数据即可正常显示。
extjs4自定义深蓝色主题
11-17
之前项目使用的一个深蓝色主题，继承自extjs4原生classic主题。 先引入ext-ux-all.css，再引入fixed.css
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
10-17
主要介绍了ExtJs使用自定义插件动态保存表头配置(隐藏或显示) ,需要的朋友可以参考下
ExtJs3下拉树
07-19
ExtJs3下拉树 分两种方式调用：第一种： xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, rootVisible : false, root : new Ext.tree.AsyncTreeNode({ draggable : false, expanded : true }), loader : new Ext.tree.TreeLoader({ url : 'basedata/do_dm!read.action' }) }); 第二种： xtype : 'combotree', name : 'dm', fieldLabel : 'dm, url : 'basedata/do_dm!read.action', rootVisible:false
【叨、校长】Ext 下拉树插件_ComboTree_xz
04-09
NULL 博文链接：https://daoxiaozhang.iteye.com/blog/1628870
EXTJS 动态生成下来树形框
CHINADENG的专栏
10-26 216
本例中的Ext.ux.ComboBoxTree对Ext.form.ComboBox控件进行了简单的扩展，将Ext.tree.TreePanel整合进来，以下拉树的形式显示出来。 扩展的功能点： 一、支持form的提交 二、提供属性selectNodeModel，指选择树结点的模式，提供四种模式，分别是 1. all：所有结点都可选中 2. exceptRoot：除根结...
EXTjS4下拉树 支持单选多选级联选择 comboxtree
热门推荐
yangxiaojun9238的专栏
11-25 2万+
初学EXTjS,代码参照了很多帖,忙活了一天,代码写的比较简单,容易看懂.    本下拉树支持带复选框和不带复选框的JSON数据的,带复选框的下拉树也实现了单选功能,只需配置一下即可! 效果图. 不带checked的json数据格式只支持单选 带jchecked的json数据的单选 带checked的json数据的多选,可支持级联操作,级联分为级联
ExtJS3 下拉树TreeComboBox的修改
simen_net
12-17 268
先来一个效果图，已在Firefox3.5、IE7、Chrome3中测试正常 完整应用和代码请转到 http://www.iteye.com/topic/553020   拜读了[Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree 学习了不少东西，但和自己现用的TreeComboBox比较还是发现有些地方不妥，这里列出来大家探讨一下 1、xiexu...
extjs3.4 ComboBoxTree高级实现
henry
06-01 1847
ComboBoxTree.js ComboBoxTree = Ext.extend(Ext.form.ComboBox,{ callback : Ext.emptyFn, store : new Ext.data.SimpleStore({ fields : [], data : [ {} ], }), editable
Ext.form.ComboBoxTree 下拉树 下拉多选树
hahadekuai的专栏
07-20 1万+
源代码:  2012年7月27日更新 修复了选择后通过getValue无法获取值的bug. /** * @author 哈哈的快 QQ:20151481 * @link http://blog.csdn.net/hahadekuai/article/details/7769093 * @version 1.4 * @date 2012-7-27 9:10  */ if ('fun
Extjs3.0拓展comboBox成comboBoxTree
xys_00
03-30 539
直接贴代码： Ext.ns("GDRP.ui"); /**    * 下拉列表选择树    *    * 依赖EXTJS3版本    */ GDRP.ui.ComboBoxTree = Ext         .extend(                 Ext.form.ComboBox,                 {
ExtJS3 实现异步下拉树
Night In Forest
10-24 280
     附件中的xlTree.js 是扩展的ExtJs3  combobox Tree 应用时只需引用到页面中，基本调用如下   items:[{ xtype:'xcomboboxtree', fieldLabel:'所属机构', id:'departBtnID', ...
extjs3 上传文件
最新发布
01-19
在extjs3中上传文件需要引入两个扩展文件：FileUploadField.js和fileuploadfield.css。这两个文件可以在extjs3包中的examples/form目录下找到。 以下是一个示例代码，演示了如何在extjs3中上传文件： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值