经常在用于显示组织机构的时候会使用下拉树列表组合框,在此给出本人的实现方式,直接上代码:
Ext.ux.TreeCombox = Ext.extend(Ext.form.ComboBox, { /** * @cfg treeUrl {String} * 树的请求地址 */ /** * 根节点 * @property root {TreeNode} */ store : new Ext.data.SimpleStore({ fields : [], data : [[]] }), editable : false, mode : 'local', emptyText : "请选择", allowBlank : false, blankText : "必须输入!", triggerAction : 'all', maxHeight : 400, anchor : '95%', displayField : 'text', valueField : 'id', selectedClass : '', onSelect : Ext.emptyFn, initComponent : function() { this.addEvents( "nodeclick", "afterTreeExpand" ) this.divId = Ext.id() this.tpl = "<tpl for='.'><div style='height:380px'><div id='"+this.divId+"'></div></div></tpl>" this.initTree(); this.tree.on('click', function(node) { // alert("click") // this.selectByValue(node.text) this.setValue(node.text); this.fireEvent("nodeclick",this,node); this.collapse(); },this) this.on('expand', function() { this.tree.render(this.divId); this.fireEvent("afterTreeExpand",this,this.tree) if(this.expandTree){ this.tree.expandAll(); } },this); Ext.ux.TreeCombox.superclass.initComponent.call(this); }, initTree : function () { this.tree = new Ext.tree.TreePanel({ height : 380, scope : this, autoScroll : true, split : true, rootVisible : false, root : this.root || { text : '根节点', draggable : false }, loader :this.treeLoader || new Ext.tree.TreeLoader({ url : this.treeUrl }) }); }, getRootNode : function() { return this.tree.root; }, getTree : function() { return this.tree; } }); Ext.reg("comboxtree",Ext.ux.TreeCombox)
相关推荐
extjs下拉树
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
extjs 树形下拉列表框,可以进行数据选择,数据回显。
Extjs 下拉列表
extjs实现的下拉树的核心代码,包括js,jsp,对有需要的同仁提供参考与学习之用
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
ExtJs4实现下拉树选择框ComboTree, 文档中包含代码。
ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
ExtJS4下拉树组件 ExtJS4下拉树组件
Extjs-多功能下拉树列表.docExtjs-多功能下拉树列表.docExtjs-多功能下拉树列表.docExtjs-多功能下拉树列表.docExtjs-多功能下拉树列表.docExtjs-多功能下拉树列表.docExtjs-多功能下拉树列表.doc
NULL 博文链接:https://init-since.iteye.com/blog/2095766
自定义下拉树,你懂的,内附图和前后台源代码
网上搜索了许久未找到...Extjs4.2 带复选框的下拉树,解决了向下勾选子节点、向上勾选父节点,正选反选获取值等问题,勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css
extjs4.1下拉复选框完整DEMO,包含了extjs4.1主文件,代码实现了动态加载功能,所以需要配置IIS或者apache。插件文件在ux目录下,请自行参考。
extjs下拉树,在网上找了很多,发现bug实在让人头大,干脆自己写了个下拉树组件,功能全面
利用extjs6自带的treePicker插件,实现下拉树的效果
Extjs4多选树,支持多选和单选,能够实现默认值选中,数据存放在json,里面有明确的提示信息。很适合初学者借鉴学习
NULL 博文链接:https://lpcjrflsa.iteye.com/blog/1704537
ext js 下拉树 真正可执行 包括引入的js和css