EXTJS treecombox

最新推荐文章于 2020-12-23 08:22:13 发布
最新推荐文章于 2020-12-23 08:22:13 发布
阅读量242 收藏
点赞数
分类专栏： Extjs 文章标签： EXT json UI J#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenxueyong7345/article/details/83355111
版权
今天写了一个后台的菜单管理页面，新增或修改树节点时，需要选择已经存在的节点作为父节点，于是想让一个combox作为载体显示一个树的widget，EXTJS并没有提供该控件，于是逛了逛一些论坛和网站，发现vifir的博客系统使用到了此控件，不过并没有提供源代码参考，没办法，自己写一个吧...

以下代码是扩展于combox的 DynamicTreeCombox，代码如下：
Java代码 复制代码
  1. Ext.ns("Ext.ux.form");   
  2. Ext.ux.form.DynamicTreeCombox= Ext.extend(Ext.form.ComboBox, {   
  3.     initComponent:function(){   
  4.         Ext.ux.form.DynamicTreeCombox.superclass.initComponent.call(this);   
  5.         this.addEvents('beforeClickNode','afterClickNode');   
  6.         if(!this.tree){   
  7.             this.tree=new Ext.tree.TreePanel({   
  8.                 containerScroll:true,   
  9.                 rootVisible:false,   
  10.                 root:new Ext.tree.AsyncTreeNode()   
  11.             });   
  12.             this.tree.loader=new Ext.tree.TreeLoader(this.loaderConfig||{dataUrl:"",baseAttrs:{}});   
  13.             this.tree.loader.addListener("beforeload",this.beforeLoad,this);   
  14.             this.tree.loader.addListener("load",this.onLoad,this);   
  15.             this.tree.addListener('collapsenode',this.onNodeCollapse,this);   
  16.             this.tree.addListener('expandnode',this.onNodeExpand,this);   
  17.         }   
  18.         var fieldMp={   
  19.             text:"text",   
  20.             qtip:"qtip",   
  21.             parentFuncId:"id",   
  22.             icon:"icon"  
  23.         };   
  24.         if(!this.fieldMapping){   
  25.             this.fieldMapping=fieldMp;   
  26.         }else{   
  27.             Ext.applyIf(this.fieldMapping,fieldMp);   
  28.         }   
  29.     },   
  30.        
  31.     initList:function(){   
  32.         if(!this.list){   
  33.             var cls = 'x-combo-list';   
  34.             this.list = new Ext.Layer({   
  35.                 shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false  
  36.             });   
  37.             var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);   
  38.             this.list.setWidth(lw);   
  39.             this.list.swallowEvent('mousewheel');   
  40.             this.innerList = this.list.createChild({cls:cls+'-inner'});   
  41.             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));   
  42.             this.innerList.setHeight("100%");   
  43.         }   
  44.     },   
  45.        
  46.     doQuery:function(){   
  47.         if(this.expandAll){   
  48.             var loader=this.tree.loader;   
  49.             if(loader.baseAttrs){   
  50.                 Ext.apply(loader.baseAttrs,{expanded:this.expandAll});   
  51.             }else{   
  52.                 loader.baseAttrs={expanded:this.expandAll};   
  53.             }              
  54.         }   
  55.         if(!this.tree.rendered){   
  56.             this.tree.render(this.innerList);   
  57.             this.tree.addListener("click",this.clickNode,this);   
  58.         }   
  59.         this.expand();   
  60.     },   
  61.        
  62.     beforeLoad:function(loader,node){   
  63.         if(node!=node.getOwnerTree().root){                                                                                                                    
  64.             loader.baseParams.parentFuncId=node.attributes[this.fieldMapping.parentFuncId];                                                                                                                    
  65.         }   
  66.     },   
  67.        
  68.     onLoad:function(loader,node,res){   
  69.         var nodeArr=node.childNodes;   
  70.         for(var i=0,j=nodeArr.length;i<j;i++){   
  71.             if(nodeArr[i].attributes[this.fieldMapping.icon]){   
  72.                 nodeArr[i].getUI().getIconEl().src=nodeArr[i].attributes[this.fieldMapping.icon];   
  73.             }   
  74.             nodeArr[i].setText(nodeArr[i].attributes[this.fieldMapping.text]);   
  75.             nodeArr[i].ui.textNode.setAttribute("qtip", nodeArr[i].attributes[this.fieldMapping.qtip]);   
  76.         }      
  77.     },   
  78.        
  79.     clickNode:function(node){   
  80.         if(this.fireEvent('beforeClickNode',this,node)){   
  81.             this.setValue(node.attributes[this.displayField]);   
  82.         }   
  83.         this.fireEvent("afterClickNode",this,node);        
  84.         this.collapse();   
  85.     },   
  86.        
  87.     onNodeCollapse:function(node){   
  88.         this.list.setHeight(this.tree.getEl().getHeight()+2);   
  89.     },   
  90.        
  91.     onNodeExpand:function(node){   
  92.         this.list.setHeight(this.tree.getEl().getHeight()+2);   
  93.     },   
  94.        
  95.     onDestroy:function(){   
  96.         if(this.view){   
  97.             this.view.el.removeAllListeners();   
  98.             this.view.el.remove();   
  99.             this.view.purgeListeners();   
  100.         }   
  101.         if(this.tree.loader){   
  102.             this.tree.loader.purgeListeners();   
  103.         }   
  104.         if(this.tree){   
  105.             this.tree.el.removeAllListerers();   
  106.             this.tree.el.remove();   
  107.             this.tree.purgeListeners();   
  108.         }   
  109.         if(this.innerList){   
  110.             this.innerList.destroy();   
  111.         }   
  112.         if(this.list){   
  113.             this.list.destroy();   
  114.         }   
  115.         Ext.form.ComboBox.superclass.onDestroy.call(this);   
  116.     }   
  117. });   
  118.   
  119. Ext.reg("treecombox",Ext.ux.form.DynamicTreeCombox);  
Ext.ns("Ext.ux.form");
Ext.ux.form.DynamicTreeCombox= Ext.extend(Ext.form.ComboBox, {
	initComponent:function(){
		Ext.ux.form.DynamicTreeCombox.superclass.initComponent.call(this);
		this.addEvents('beforeClickNode','afterClickNode');
		if(!this.tree){
			this.tree=new Ext.tree.TreePanel({
				containerScroll:true,
				rootVisible:false,
				root:new Ext.tree.AsyncTreeNode()
			});
			this.tree.loader=new Ext.tree.TreeLoader(this.loaderConfig||{dataUrl:"",baseAttrs:{}});
			this.tree.loader.addListener("beforeload",this.beforeLoad,this);
			this.tree.loader.addListener("load",this.onLoad,this);
			this.tree.addListener('collapsenode',this.onNodeCollapse,this);
			this.tree.addListener('expandnode',this.onNodeExpand,this);
		}
		var fieldMp={
			text:"text",
			qtip:"qtip",
			parentFuncId:"id",
			icon:"icon"
		};
		if(!this.fieldMapping){
			this.fieldMapping=fieldMp;
		}else{
			Ext.applyIf(this.fieldMapping,fieldMp);
		}
	},
	
	initList:function(){
        if(!this.list){
            var cls = 'x-combo-list';
            this.list = new Ext.Layer({
                shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
            });
            var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
            this.list.setWidth(lw);
            this.list.swallowEvent('mousewheel');
            this.innerList = this.list.createChild({cls:cls+'-inner'});
            this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
            this.innerList.setHeight("100%");
        }
    },
	
	doQuery:function(){
		if(this.expandAll){
			var loader=this.tree.loader;
			if(loader.baseAttrs){
				Ext.apply(loader.baseAttrs,{expanded:this.expandAll});
			}else{
				loader.baseAttrs={expanded:this.expandAll};
			}			
		}
		if(!this.tree.rendered){
			this.tree.render(this.innerList);
			this.tree.addListener("click",this.clickNode,this);
		}
		this.expand();
    },
    
    beforeLoad:function(loader,node){
    	if(node!=node.getOwnerTree().root){																													
			loader.baseParams.parentFuncId=node.attributes[this.fieldMapping.parentFuncId];																													
		}
    },
    
    onLoad:function(loader,node,res){
    	var nodeArr=node.childNodes;
		for(var i=0,j=nodeArr.length;i<j;i++){
			if(nodeArr[i].attributes[this.fieldMapping.icon]){
				nodeArr[i].getUI().getIconEl().src=nodeArr[i].attributes[this.fieldMapping.icon];
			}
			nodeArr[i].setText(nodeArr[i].attributes[this.fieldMapping.text]);
			nodeArr[i].ui.textNode.setAttribute("qtip", nodeArr[i].attributes[this.fieldMapping.qtip]);
		}	
    },
    
    clickNode:function(node){
    	if(this.fireEvent('beforeClickNode',this,node)){
    		this.setValue(node.attributes[this.displayField]);
    	}
    	this.fireEvent("afterClickNode",this,node); 	
    	this.collapse();
    },
    
    onNodeCollapse:function(node){
    	this.list.setHeight(this.tree.getEl().getHeight()+2);
    },
    
    onNodeExpand:function(node){
    	this.list.setHeight(this.tree.getEl().getHeight()+2);
    },
    
    onDestroy:function(){
        if(this.view){
            this.view.el.removeAllListeners();
            this.view.el.remove();
            this.view.purgeListeners();
        }
        if(this.tree.loader){
        	this.tree.loader.purgeListeners();
        }
        if(this.tree){
        	this.tree.el.removeAllListerers();
        	this.tree.el.remove();
            this.tree.purgeListeners();
        }
        if(this.innerList){
            this.innerList.destroy();
        }
        if(this.list){
            this.list.destroy();
        }
        Ext.form.ComboBox.superclass.onDestroy.call(this);
    }
});

Ext.reg("treecombox",Ext.ux.form.DynamicTreeCombox);


下面是调用的代码，已经加上了注释：
Java代码 复制代码
  1. Ext.QuickTips.init();   
  2. Ext.onReady(function(){   
  3.     var mycbo=new Ext.ux.form.DynamicTreeCombox({   
  4.         expandAll:false,//是否在点击combox时将树全部展开   
  5.         displayField:"nameLabelCode",//点击树节点时，将节点的哪个字段设置为combox的值   
  6.         fieldLabel:"Dynamic Tree Combo",   
  7.         readOnly:true,   
  8.         width:180,   
  9.         loaderConfig:{   
  10.             dataUrl:sys.Constants.ROOTPATH+"/sysmgr/SysMenu_list.do",//加载树的URL   
  11.             baseParams:{parentFuncId:""}//传递给后台的参数，其中parentFuncId是必须的，而且初始化为第一次加载时parentFuncId为空，即加载的是后台数据库的根节点   
  12.         },   
  13.         fieldMapping:{//因为我的后台程序返回的没有text qtip字段，故加上fieldMapping进行映射，如果后台返回的json有这几个字段，此属性可省略   
  14.             text:"nameLabelCode",//映射node的text字段   
  15.             qtip:"descriptionLabelCode",//映射node的qtip字段   
  16.             parentFuncId:"funcId"//映射动态请求后台时使用node的funcId字段作为请求参数   
  17.         }   
  18.     });   
  19.        
  20.     var myform=new Ext.form.FormPanel({   
  21.         renderTo:Ext.getBody(),   
  22.         width:350,   
  23.         height:100,   
  24.         frame:true,   
  25.         labelWidth:150,   
  26.         items:[mycbo]   
  27.     });   
  28. });  
Ext.QuickTips.init();
Ext.onReady(function(){
	var mycbo=new Ext.ux.form.DynamicTreeCombox({
		expandAll:false,//是否在点击combox时将树全部展开
		displayField:"nameLabelCode",//点击树节点时，将节点的哪个字段设置为combox的值
		fieldLabel:"Dynamic Tree Combo",
		readOnly:true,
		width:180,
		loaderConfig:{
			dataUrl:sys.Constants.ROOTPATH+"/sysmgr/SysMenu_list.do",//加载树的URL
			baseParams:{parentFuncId:""}//传递给后台的参数，其中parentFuncId是必须的，而且初始化为第一次加载时parentFuncId为空，即加载的是后台数据库的根节点
		},
		fieldMapping:{//因为我的后台程序返回的没有text qtip字段，故加上fieldMapping进行映射，如果后台返回的json有这几个字段，此属性可省略
			text:"nameLabelCode",//映射node的text字段
			qtip:"descriptionLabelCode",//映射node的qtip字段
			parentFuncId:"funcId"//映射动态请求后台时使用node的funcId字段作为请求参数
		}
	});
	
	var myform=new Ext.form.FormPanel({
		renderTo:Ext.getBody(),
		width:350,
		height:100,
		frame:true,
		labelWidth:150,
		items:[mycbo]
	});
});


贴上效果图：
[img]
http://www.iteye.com/upload/attachment/41240/4848558b-3532-38b7-9650-b32fc214bc73.jpg[/img]
  • 4848558b-3532-38b7-9650-b32fc214bc73-thumb
  • 大小: 27.8 KB
chenxueyong7345
关注
专栏目录
extjs tree下拉列表_Extjs combox Tree 下拉框树点击+隐藏问题
weixin_28782221的博客
12-23 309
问题：单击+会隐藏下拉树问题解决：重载ComboBoxExt.override(Ext.form.ComboBox, {onViewClick : function(doFocus) {var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);if (r) {this.onSelect(r, ...
Extjs4.X下comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用
10-23
Extjs4 comboboxTree下拉树型菜单，完美支持多选、单选，绝对好用。来源于网络，稍作修改。
收藏Extjs组件comboxTree
chy2z的专栏
04-25 494
TreeComboField.js  代码： Ext.namespace("Ext.tet");Ext.tet.TreeComboField = Ext.extend(Ext.form.TriggerField, {    valueField : "Id",    displayField : "Name",    haveShow : false,    editable : false, 
Extjs Combo Tree
xugangjava的专栏
02-20 3862
网上找了半天，找到一个好用的，改了一行代码 使用xtype来创建tree 原文地址 http://penggle.iteye.com/blog/803338 效果图 { xtype:'xcomboboxtree', fieldLabel: '选择部门', width:
Extjs中ComboBoxTree的实现
weixin_30681121的博客
05-28 341
最近涉及到的一个项目中，需要实现ComboBoxTree的效果，首先，看看效果吧…… 在Extjs中是没有这种效果的，所以得自己写，在网络上看了看别人的资料，自己再总结了一下，修改了一下，代码如下： Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor: function (cfg) { ...
extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_
09-29
ExtJS是一种广泛使用的JavaScript库，专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具，使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中，我们主要关注的是...
ExtJS 7.6 SDK trial
10-03
ExtJS 是一个流行的JavaScript框架，用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API，使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新，...
包含各种类型的extjs小图标，Extjs4小图标
03-28
ExtJS 是一个流行的JavaScript框架，主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据管理功能以及强大的用户界面（UI）元素。在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列...
ExtJs3.3中文API.CHM_extjs3.3中文文档_
09-30
ExtJS是一个广泛使用的JavaScript库，专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本，提供了许多功能和组件，使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...
ExtJS 7.7 SDK trial
最新发布
07-06
ExtJS 是一个强大的JavaScript框架，主要用于构建富客户端的Web应用程序，提供丰富的用户界面组件和强大的数据绑定机制。在"ExtJS 7.7 SDK trial"中，我们可以探索以下几个关键知识点： 1. **版本升级**：从7.7版本...
Extjs ComboBoxTree 下拉树组件
11-19
extjs下拉树，在网上找了很多，发现bug实在让人头大，干脆自己写了个下拉树组件，功能全面
Extjs4 下拉树 TreeCombo
11-10
简单的修改下Extjs 的引用路径 双击Index.html 就可以看到效果了。
Extjs4 Combox tree
04-15
此comboxTree优点多多，可自己配置属性。
comboxTree下拉树，实现单选功能
07-08
本代码实现ext combox tree 单选填充功能
TreeCombo,Ext TreeCombo 树形 下拉框,树形下拉框
06-03
TreeCombo,Ext TreeCombo 树形 下拉框,树形下拉框
extjs TreeComboBox
iteye_14327的博客
11-09 155
[code="javascript"] Ext.ns('Ext.my.form'); // TreeComboBox (function() { var createTreePanel = function(treeWidth, treeHeight, rootVisible, root) { var treePanel = new Ext.tree.TreePanel( { ...
下拉框树(treeComboBox)
originsoft的博客
02-26 734
树型的下拉框，在网上找到的 &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initComponent()"&gt; &lt;mx:Script&gt; &lt;!
extjs tree下拉列表_Ext TreeCombo 树形 下拉框
weixin_42505477的博客
12-23 432
参考: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* @c...
extjs4.1下改combobox为treecombo 并带有check
qijianglin的专栏
11-28 1043
1、功能描述： 最近用户要求在combobox选择填入时，能够在树结构中选择节点，并保存和修改。 2、代码展示： Ext.define("HgTreeCheckCombo", { extend : "Ext.form.field.ComboBox", alias : 'widget.hgtreecheckcombo', requires : [], multiSelect : tru
ExtJS表单组件详解
"这篇文档主要介绍了ExtJS中的表单组件及其使用方法，特别是FormPanel容器在构建表单中的角色。" 在ExtJS中，表单是通过FormPanel容器来实现的，这是一种强大的组件，用于组织和展示用户输入数据。表单通常采用form...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值