Extjs下拉树代码测试总结

最新推荐文章于 2018-01-22 20:40:48 发布
最新推荐文章于 2018-01-22 20:40:48 发布
阅读量9.3k 收藏 8
点赞数
分类专栏： ExtJs Web应用 文章标签： extjs 下拉树
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kunoy/article/details/8067801
版权

     首先主要代码源自网络，对那些无私的奉献者表示感谢！

     笔者对这些代码做了二次修改，并总结如下：

     Extjs3.x版本下拉树代码：

Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {   
    constructor : function(cfg) {   
        cfg = cfg || {};   
        Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({   
            maxHeight : 300,   
            editable : false,
            mode : 'local',   
            triggerAction : 'all',   
            rootVisible : false,   
            selectMode : 'all'  
        }, cfg));   
    },   
    store : new Ext.data.SimpleStore({   
        fields : [],   
        data : [[]]   
    }),   
    // 重写onViewClick，使展开树结点是不关闭下拉框   
    onViewClick : function(doFocus) {   
        var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);   
        if (r) {   
            this.onSelect(r, index);   
        }   
        if (doFocus !== false) {   
            this.el.focus();   
        }   
    },   
    tree : null,   
    // 隐藏值   
    hiddenValue : null, 
    getHiddenValue : function() {   
        return this.hiddenValue;   
    },
    getValue : function() {   //增加适用性，与原来combo组件一样
        return this.hiddenValue;   
    },   
    setHiddenValue : function(code, dispText) {   
        this.setValue(code);   
        Ext.form.ComboBox.superclass.setValue.call(this, dispText);   
        this.hiddenValue = code;   
    },   
    initComponent : function() {   
        var _this = this;   
        var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId   
        this.tpl = "<div style='height:" + _this.maxHeight + "px' id='" + tplRandomId + "'></div>"  
        this.tree = new Ext.tree.TreePanel({   
            border : false,   
            enableDD : false,   
            enableDrag : false,   
            rootVisible : _this.rootVisible || false,   
            autoScroll : true,   
            trackMouseOver : true,   
            height : _this.maxHeight,   
            lines : true,   
            singleExpand : true,   
            root : new Ext.tree.AsyncTreeNode({   
                id : _this.rootId,   
                text : _this.rootText, 
                iconCls:'ico-root',
                expanded:true,
                leaf : false,   
                border : false,   
                draggable : false,   
                singleClickExpand : false,   
                hide : true  
            }),   
            loader : new Ext.tree.TreeLoader({   
            	nodeParameter:'ID',
                requestMethod:'GET',
                dataUrl : _this.url   
            })   
        });   
        this.tree.on('click', function(node) {   
            if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') {   
                if(_this.fireEvent('beforeselect',_this,node)){
                	_this.fireEvent('select',_this,node);
                }                
            }   
        });
        this.on('select',function(obj,node){
        	var dispText = node.text;   
            var code = node.id;
            obj.setHiddenValue(code, dispText); 
            obj.collapse();  
        });
        this.on('expand', function() {   
            this.tree.render(tplRandomId);   
        });   
        Ext.ux.TreeCombo.superclass.initComponent.call(this);   
    }   
})   
Ext.reg("treecombo", Ext.ux.TreeCombo);

使用方法：

var treecombo=new Ext.ux.TreeCombo({  
            name : 'areaName',   
            tplId : 'tree_tpl',   
            rootVisible : true,   
            rootText : '/',
            rootId:'root', 
            url : 'getTreeData.aspx',                                                                   maxHeight :300,                                                                        
            id: 'cmbJS',                                           
            allowBlank: true, 
            selectMode:'leaf',                                           
            width : '200'            
        });

Extjs4.x版本下拉树代码一：

Ext.define('Ext.ux.TreeComboBox',{
	extend : 'Ext.form.field.ComboBox',
	alias: 'widget.treecombo',
	store : new Ext.data.ArrayStore({fields:[],data:[[]]}),
	editable : false,
	listConfig : {resizable:true,minWidth:100,maxWidth:400,minHeight:200,maxHeight:400},
	_idValue : null,
	_txtValue : null,
	treeObj: null,
	initComponent : function(){
		var _this = this; 
		this.treeObj= new Ext.tree.Panel({
			border : false,
			id:Ext.id(),
			height : 380,
			width : 400,
			autoScroll : true,
			store : Ext.create('Ext.data.TreeStore', {
				fields : ['id','text','leaf'],
				autoLoad : false,
				nodeParam: 'ID',
				proxy: {
			        type: 'ajax',
			        url : _this.url
			    },
			    root: {
			        expanded: _this.expanded||false,
			        id:_this.rootId||'root',
			        text : _this.rootText||'/'
			    }
			})
		});
		this.treeRenderId = Ext.id();
		this.tpl = "<div id='"+this.treeRenderId+"'></div>";	
		this.callParent(arguments);
		this.on({
			'expand' : function(){
			    if(!this.treeObj.rendered&&this.treeObj&&!this.readOnly){
			        Ext.defer(function(){
			        	this.treeObj.render(this.treeRenderId);
		        	},300,this);
			    }
			}
		});
		this.treeObj.on('itemclick',function(view,rec){
			if(rec&&((_this.selectMode == 'leaf' && rec.isLeaf() == true) || _this.selectMode == 'all')){
				this.setValue(this._txtValue = rec.get('text'));
				this._idValue = rec.get('id');
				this.collapse();
				_this.fireEvent('select',_this,rec);
			}
		},this);
	},
	getValue : function(){//获取id值
		return this._idValue;
	},
	getTextValue : function(){//获取text值
		return this._txtValue;
	},
	setLocalValue : function(id,txt){//设值
		this._idValue = id;
		this.setValue(this._txtValue = txt);
	},
	reLoad:function(id,url){
		this.treeObj.getStore().proxy.url =url;
		this.treeObj.setRootNode({
        	id:id,
        	text:'/',
        	expanded:true
        });
	}
});

使用方法与前面基本相同。这个版本存在很多问题，当一个界面存在两个下拉树时，其中一个下拉树在第二次下拉操作时，树不会显示，如图：



另外由于tree渲染到div上，当节点过多出现滚动条时，会显示两条滚动条，一条是div本身的，一条是treepanel的，如图：

 所以此版本不采用，其中添加了一个reLoad()方法，这是由于两个下拉树需要联动才添加的。

Extjs4.x版本下拉树代码二：

Ext.define("Ext.ux.ComboTree", {
	extend : "Ext.form.field.Picker",
	alias : 'widget.combotree',
	requires : ["Ext.tree.Panel"],
	_idValue : '',
	_txtValue : '',
	initComponent : function() {
	  this.callParent();
	  var self = this;
	  var store = Ext.create('Ext.data.TreeStore', {
		  proxy : {
		        type : 'ajax',
		        url : self.storeUrl
		   },
		   nodeParam: 'ID',
		   root : {
		       id : self.rootId,
		       text : self.rootText,
		       expanded:self.expanded||false
		   }
	  });
	  self.picker = new Ext.tree.Panel({
		     id:Ext.id(),		     
		     height : self.treeHeight||300,
		     resizable:true,minWidth:100,maxWidth:400,minHeight:200,maxHeight:500,
		     autoScroll : true,
		     floating : true,
		     focusOnToFront : false,
		     shadow : true,
		     ownerCt : this.ownerCt,
		     useArrows : self.useArrows||true,
		     store : store,
		     rootVisible : true
	  });
	  self.picker.on({
	     'itemclick' : function(view,rec) {
	    	 if(rec&&((self.selectMode == 'leaf' && rec.isLeaf() == true) || self.selectMode == 'all')){
	    		  //self.setRawValue(rec.get('id'));// 隐藏值
	    		  self._idValue = rec.get('id');
			      self.setValue(self._txtValue=rec.get('text'));// 显示值
			      self.collapse();
				  self.fireEvent('select',self,rec);
		     }
	     }
	  });
	},
//	createPicker : function() {
//	  var self = this;
//	  var store = Ext.create('Ext.data.TreeStore', {
//		  proxy : {
//		        type : 'ajax',
//		        url : self.storeUrl
//		   },
//		   nodeParam: 'ID',
//		   root : {
//		       id : self.rootId,
//		       text : self.rootText,
//		       expanded:self.expanded||true
//		   }
//	  });
//	  self.picker = new Ext.tree.Panel({
//		     id:Ext.id(),		     
//		     height : 300,
//		     //resizable:true,minWidth:100,maxWidth:400,minHeight:200,maxHeight:400,
//		     autoScroll : true,
//		     floating : true,
//		     focusOnToFront : false,
//		     shadow : true,
//		     ownerCt : this.ownerCt,
//		     useArrows : self.useArrows||true,
//		     store : store,
//		     rootVisible : true
//	  });
//	  self.picker.on({
//	     'itemclick' : function(view,rec) {
//	    	 if(rec&&((self.selectMode == 'leaf' && rec.isLeaf() == true) || self.selectMode == 'all')){
//	    		  //self.setRawValue(rec.get('id'));// 隐藏值
//	    		  self._idValue = rec.get('id');
//			      self.setValue(self._txtValue=rec.get('text'));// 显示值
//			      self.collapse();
//				  self.fireEvent('select',self,rec);
//		     }
//	     }
//	  });
//	  return self.picker;
//	},
	getValue : function(){//获取id值
		return this._idValue;
	},
	getTextValue : function(){//获取text值
		return this._txtValue;
	},
	reLoad:function(id,url){
		var store=this.picker.getStore();
		var root=this.picker.getRootNode();
		store.proxy.url =url;
		root.set('id',id);
		store.load();
	},
	alignPicker : function() {
	  var me = this, picker, isAbove, aboveSfx = '-above';
	  if (this.isExpanded) {
		   picker = me.getPicker();
		   if (me.matchFieldWidth) {
		      picker.setWidth(me.bodyEl.getWidth());
		   }
		   if (picker.isFloating()) {
		       picker.alignTo(me.inputEl, "", me.pickerOffset);
		       isAbove = picker.el.getY() < me.inputEl.getY();
		       me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls+ aboveSfx);
		       picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls+ aboveSfx);
		   }
	  }
	}
});

       此版本解决了上述两大问题，其中注解的部分为原作者代码，使用createPicker存在一个问题，必须点击下拉操作后，treepanel才会进行渲染，那么数据联动也就谈不上了（需要联动的tree没有渲染，如何进行数据加载?)，所以笔者移到initComponent下执行，另外也解决了resize的问题。
       使用方法：

var treecombo=new Ext.ux.ComboTree({ 
            fieldLabel: 'Test',
            labelWidth: 60,   
            rootText : '/',
            rootId:'root', 
            expanded:true,
            storeUrl : 'getTreeData.aspx',                                                                                                                                                                                          
            id: 'cmbJS',                                           
            selectMode:'leaf',
            treeHeight:300,           
            width : 200            
        });

       到此，Extjs4.1的下拉树完美了，世界太平了！

 

作者： kunoy
申明：作者写博是为了总结经验，和交流学习之用。
如需转载，请尽量保留此申明，并在文章页面明显位置给出原文连接。谢谢！

 

江下飞雪
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 32
    评论
专栏目录
ext js 下拉树
04-09
ext js 下拉树 真正可执行 包括引入的js和css
解决Extjs下拉框不显示的问题
10-19
在ExtJS中，ComboBox是一个常用的组件，用于提供下拉列表供用户选择。它结合了文本输入框和下拉菜单的功能，通常用于数据选择场景。然而，有时候开发者可能会遇到ComboBox不显示下拉列表的问题，就像标题和描述中所...
ext 下拉树
u013365569的专栏
01-27 863
效果如下：                                    一、areaTree.js /** * 下拉树ComboBoxTree * * @extend Ext.form.ComboBox * @xtype 'combotree' */ ComboBoxTree = Ext.extend(Ext.form.ComboBox, { /**
Ext 下拉树
zy_crazy_code的博客
07-13 297
首先要引入一个js  combotree.js放在文章最后面 var areaIdTree = new Ext.tree.TreeLoader({dataUrl:basePath+"/btnCaseListManagerAction.do?act=getAreaIdTree"}) var areaIdComboTree = new Ext.form.ComboBoxTree({ fiel
Extjs实现下拉树
weixin_34023982的博客
04-01 300
2019独角兽企业重金招聘Python工程师标准>>> ...
extjs扩展年度控件,EXTJS里的时间控件的年度重写
10-29
总结来说，EXTJS扩展年度控件是一项涉及到组件继承、模板修改、事件处理和UI设计的任务。通过这样的定制，我们可以为用户提供更符合业务需求的时间选择体验，同时也展示了EXTJS强大的可扩展性和灵活性。在实践中，...
ExtJS 3.2的中文参考手册
04-21
### ExtJS 3.2 的中文参考手册知识点详解 #### 1. **EXT简介** - **定位**: 作为一款强大的...以上内容是对ExtJS 3.2中文参考手册的关键知识点进行了详细的解析和总结，希望能对学习ExtJS的开发者有所帮助。
Ext下拉列表树
05-18
Ext下拉列表树，任何版本都可使用，只要下载即可使用。
Ext下拉树、下拉表格
10-14
项目是myeclipse的web项目，导入项目即可，自己添加ext的js和css文件，资源中没有加入ext的基础文件
extjs下拉树
12-05
extjs下拉树
Extjs4 下拉树
04-16
使用方法： var comb = Ext.create('Ext.ux.ComboTree',{ name:'xzqh', dicName:'test', width : 270, fieldLabel : '行政区划', url:'getDic', all:true, labelWidth : 60, multiple:true });
Extjs下拉多选树
07-22
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
自定义ExtJS控件之下拉树和下拉表格
923723914
10-14 488
简介 在Ext官方的例子中只有下拉列表控件，但是在实际业务中只有下拉列表无法满足需求的，像下拉树和下拉表格都是很常见的控件，对于刚使用Ext的人来说，自定义一个控件好难，其实多读官方的源码有些事情就不会那么难了。下面是下拉树的代码： Ext.define('ComboTreeBox',{ extend : 'Ext.form.field.ComboBox', multiSelect...
ExtJS表单之下拉树
zccst的专栏
11-09 169
ExtJS表单之下拉树 作者：zccst 一、数据源 [code="js"] var store_type = Ext.util.JSON.encode(o.store_type); var store_type_obj = eval( "(" + store_type + ")" ); setStoreTreeByNode(store_type_ob...
ext下拉树
a729812804的专栏
11-21 119
创建组件               var root = new Ext.tree.AsyncTreeNode({expanded:true,id:'0',text:'全部'});         var tree = new Ext.tree.TreePanel({             loader: loader,             id:'tree',      ...
Extjs 下拉树过滤问题
qq_38130280的博客
01-22 649
在最近开发的项目中，用到下拉树。默认加载的treeStore为状态是启用的。新增了一个所有的勾选框，勾选所有后加载的为启用和停用的。如图: 勾选所有后： 其中编号名称中有过滤的作用：现在问题：未点击所有的时候搜索S会过滤掉不是编号或者名称没有S的数据、展示包含S的数据，再点击所有，想要实现加载启用、停用数据后在执行过滤，但是没有成功。 未成功代码： 原因：在勾选所有后，先过
extjs6 实现下拉树
最新发布
04-28
要在 ExtJS 6 中实现下拉树，可以使用 ExtJS 的 Combo 组件和 TreePanel 组件结合起来。具体步骤如下： 1. 创建一个 Ext.form.field.ComboBox 组件，作为下拉框。 2. 设置 ComboBox 的 triggerAction 为 'all'，...
评论 32
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值