<script type="text/javascript" src="/resources/js/combox/ComboBoxCheckTree.js"></script> <script type="text/javascript" src="/resources/js/subQuery/TreeUI.js"></script> 主要是用到 ComboBoxCheckTree和TreeUI两个控件 模糊查询关键是使用 comboBoxCheckTree.on('beforequery',function(e){ var combo = e.combo; if (!e.forceAll) { var value=e.query; findByKeyWordFiler(value); } }); 重写下拉框的beforequery事件.赋值操作发现个问题ComboBoxCheckTree源码中有个 this.tree.on('check', function(node, checked) { combox.setValue(); }); 起赋值作用的,但是有些选中的节点,并没有赋值,取消选中却赋值了,不知道为什么, 于是修改了 this.tree.on('checkchange', function(node, checked) { combox.setValue(); });改为'checkchange'事件,就解决了该问题. 源码如下 Ext.onReady(function() { Ext.QuickTips.init(); var contenttree = new Ext.tree.TreePanel({ checkModel: 'cascade', //对树的级联多选 onlyLeafCheckable: false,//对树所有结点都可选 rootVisible:false, autoScroll:false, autoHeight:true, loader: new Ext.tree.TreeLoader({ dataUrl:'/neFunction/test', baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } }), root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'}) }); var comboBoxCheckTree = new Ext.ux.ComboBoxCheckTree({ renderTo : 'comboBoxCheckTree', width : 300, height : 150, tree:contenttree, selectValueModel:'leaf' }); comboBoxCheckTree.on('beforequery',function(e){ var combo = e.combo; if (!e.forceAll) { var value=e.query; findByKeyWordFiler(value); } }); var timeOutId = null; var treeFilter = new Ext.tree.TreeFilter(comboBoxCheckTree.tree, { clearBlank : true, autoClear : true }); // 保存上次隐藏的空节点 var hiddenPkgs = []; var findByKeyWordFiler = function(node) { clearTimeout(timeOutId);// 清除timeOutId comboBoxCheckTree.tree.expandAll();// 展开树节点 // 为了避免重复的访问后台,给服务器造成的压力,采用timeOutId进行控制,如果采用treeFilter也可以造成重复的keyup timeOutId = setTimeout(function() { // 获取输入框的值 var text = node; // 根据输入制作一个正则表达式,'i'代表不区分大小写 var re = new RegExp(Ext.escapeRe(text), 'i'); // 先要显示上次隐藏掉的节点 Ext.each(hiddenPkgs, function(n) { n.ui.show(); }); hiddenPkgs = []; if (text != "") { treeFilter.filterBy(function(n) { // 只过滤叶子节点,这样省去枝干被过滤的时候,底下的叶子都无法显示 return !n.isLeaf() || re.test(n.text); }); // 如果这个节点不是叶子,而且下面没有子节点,就应该隐藏掉 comboBoxCheckTree.tree.root.cascade(function(n) { if(n.id!='0'){ if(!n.isLeaf() &&judge(n,re)==false&& !re.test(n.text)){ hiddenPkgs.push(n); n.ui.hide(); } } }); } else { treeFilter.clear(); return; } }, 500); }; // 过滤不匹配的非叶子节点或者是叶子节点 var judge =function(n,re){ var str=false; n.cascade(function(n1){ if(n1.isLeaf()){ if(re.test(n1.text)){ str=true;return; } } else { if(re.test(n1.text)){ str=true;return; } } }); return str; }; });
相关推荐
实现Combox下拉树的关键在于数据结构的设计和UI组件的交互。数据结构通常包含父节点和子节点信息,以便在界面上形成层次结构。同时,要处理好展开、折叠、选择事件,确保用户体验流畅。 在实际应用中,Combox下拉树...
ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...
在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时...在EXTJS4中,这个控件是实现复杂下拉选择功能的利器。
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
利用extjs6自带的treePicker插件,实现下拉树的效果
在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...
在ExtJS中,下拉树(ComboBoxTree)是一种结合了下拉框和树结构的组件,它允许用户从一个展开的树形列表中选择值,而不是传统的单行文本输入或简单的下拉列表。这种组件在数据层级结构复杂且需要用户进行多级选择时...
标题中的“Extjs4 下拉树”指的是EXTJS框架中的一个组件,用于实现下拉菜单与树形结构的结合,这种组件通常在需要选择层级结构数据时非常有用,比如地区选择、组织架构选择等。EXTJS是Sencha公司开发的一个...
在ExtJS中,下拉树是通过`Ext.form.field.Tree`类实现的,它继承自`Ext.form.field.ComboBox`,增加了树状结构的功能。`ComboTree.js`可能就是实现了这个功能的JavaScript文件,包含了一些定制化的代码或扩展。 ...
### ExtJS4 下拉树组件知识点详解 #### 一、概述 在ExtJS4中,下拉树组件(TreeComboBox)是一种特殊的组合框,它结合了下拉列表和树形结构的功能,允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于...
在EXTJS4中,实现一个下拉树(Combobox Tree)并支持多选和复选功能,主要是通过自定义组件(Ext.define)来完成的。这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下...
在ExtJS 3中,实现异步下拉树涉及到几个关键概念和技术。 首先,理解“异步”意味着数据不是一次性加载完毕,而是按需加载。在下拉树中,当用户展开树节点时,只加载该节点及其子节点的数据,这减少了初始页面加载...
在本篇文章中,我们将详细了解如何使用ExtJS框架实现具有下拉树功能的下拉菜单效果。ExtJS是一个成熟的JavaScript框架,用于创建交互式的Web应用程序,提供了一整套丰富的用户界面组件,其下拉树组件是其众多组件之...
### Extjs自定义组件——下拉树:深入解析与实现 在现代Web开发中,Extjs作为一款功能强大且灵活的框架,深受开发者喜爱。它提供了丰富的UI组件库,能够帮助开发者快速构建复杂的用户界面。其中,自定义组件是Extjs...
文件"ComboBoxTree"可能是实现这一组件的源代码或者配置文件,包含了实现下拉树组件的JavaScript代码和相关的配置信息。如果需要深入了解或修改这个组件,你需要查看这个文件的内容,理解其中的数据结构、事件处理和...
在ExtJS4中,多选下拉树(Multi Select Tree)是一种用户界面组件,它结合了下拉菜单和树形结构,允许用户从层级结构中选择多个项目。这个组件在数据管理、分类选择等场景中非常实用。 在实现多选下拉树时,我们...
本教程将深入讲解如何实现EXTJS4下的下拉菜单树,并支持单选和多选功能。 1. **EXTJS4的基础概念** - EXTJS是一个基于JavaScript的富客户端框架,提供了一系列强大的组件库,可以构建复杂的、数据驱动的Web应用...