摘要：在任何一个Tree树中，提供查找功能无疑会大大方便用户。不用睁大眼睛一级一级去展开，只要输入关键字，回车就能自动定位到节点，岂不快哉？。这样的用户体验是相当完美的。但在动态异步加载的Tree树中，客户端实现这样的功能就有点困难，因为节点是异步动态加载的。默认是没有全部从服务器端取回的，通常的做法是默认加载第一级，其他级的节点都是惰性按需加载的，用户点了才会展开。而对于这个没有完全加载的树，用户希望搜索节点，怎么实现？笨办法是先展开树的所有节点，然后再在树中搜索。这样的话在服务器数据量大的情况下会非常慢。这里的实现方法是在服务器端的Servlet中查找，通过AJAX返回第一个匹配节点的路径Path，然后展开这个路径，选中这个搜索到节点。

效果图：

 

 

要实现此功能需解决三个问题：

1.  通过Ajax将节点id或text传回服务器。

2.  在服务器端查找到节点path，path由节点id号和“/”构成。注意path的格式，如：'/0/4/7'。此处0表示根节点id，7表示被查找的节点id。

3. 将path传回客服端，Extjs将通过的方法展开节点。

 

以下是具体实现：

1. servlet端要实现的功能就是封装path，将path发送到客服端即可，格式如上。代码省略。

2. 客户端代码：

// 查找树节点

 searchNode : function() {       var searchForm = Ext.getCmp("searchForm").getForm();       var param = searchForm.getValues();       if(searchForm.isValid()){           Ext.Ajax.request({                url: 'dept!search.action',                params:{formData:Ext.encode(param)},                success:function(response){                    var o = Ext.decode(response.responseText);                    if(o.success){                        var tree = Ext.getCmp('sysOrgs');                        path=o.message;                        tree.expandPath(path, 'id', this.onExpandPathComplete);                    }                },                failure:function(response){                },                scope:this          });       }  },  onExpandPathComplete:function(bSuccess, oLastNode) {     if(!bSuccess)     return;   //focus 节点，并选中节点！，以下代码不可少    oLastNode.ensureVisible();   oLastNode.select();   oLastNode.fireEvent('click', oLastNode);     }

关于tree.expandPath方法的使用具体参照API文档。