<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; }; });