Ext动态树例子

 

效果如图。
[{"cid":2,"cls":"folder","id":2,"leaf":false,"text":"服装"},{"cid":3,"cls":"folder","id":3,"leaf":false,"text":"饰品"},{"cid":4,"cls":"folder","id":4,"leaf":false,"text":"家电"}]

[{"cid":5,"cls":"folder","id":5,"leaf":false,"text":"女装"},{"cid":6,"cls":"folder","id":6,"leaf":false,"text":"男装"},{"cid":7,"cls":"folder","id":7,"leaf":false,"text":"童装"}]
这个是从数据库中取出来发送的json。

下面是jsp代码。
<script type="text/javascript">
Ext.onReady(function() {
 Ext.QuickTips.init();
 var rootNode=new Ext.tree.AsyncTreeNode({text:'商品分类',id:1});
 var loader=new Ext.tree.TreeLoader({
    url:'getCategory.do'
   });
 loader.on('beforeload',function(loader,node){
  node.on('append',function(tree,thiz,newNode,index){
   if(newNode.isLeaf()){
    newNode.on('click',function(thiz,e){
     alert('我要处理的代码--'+thiz.text);
    });
   } 
  });
  if(!node.isLeaf()){
   loader.baseParams['cid']=node.id;
  }
 });
 var treePanel=new Ext.tree.TreePanel({
  width:300,
  height:500,
  title:'类别展示',
  loader:loader,
  root:rootNode
  
 });  
 treePanel.render('categoryBrose'); 
 rootNode.expand(); 
});

    </script>
-------------------------下面是写json的代码---------------------------public ActionForward getCategory(ActionMapping arg0, ActionForm arg1,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  response.setContentType("text/json");
  Integer cid = StringUtil.getInteger(request.getParameter("cid"));
  List<Category> list = categoryDao.getChildenById(cid);
  List<CategoryTree> trees = TreeUtil.getTree(list);
  String treeStr = JSONArray.fromObject(trees).toString();
  response.setCharacterEncoding("UTF-8");
  response.getWriter().print(treeStr);
  response.getWriter().flush();
  return null;
 }

------------------------下面是工具类，将实际类别转化为Ext要求的类别------------------------------

public class TreeUtil {

 public static List<CategoryTree> getTree(List<Category> list) {
  List<CategoryTree> trees = new ArrayList<CategoryTree>();
  if(list==null){
   return trees;
  }
  for(Category ca:list){
   CategoryTree ct=new CategoryTree();
   ct.setCid(ca.getCid());
   ct.setId(ca.getCid());
   ct.setText(ca.getCname());
   System.err.println(ca.getState());
   boolean leaf=ca.getState()==4?true:false;
   System.err.println(leaf);
   ct.setLeaf(leaf);
   ct.setCls(leaf?"file":"folder");
   trees.add(ct);
  }  
  return trees;
 }

}
-------------------------Ext要求的Tree类------------------------------
public class CategoryTree implements Serializable { 
 private String text;
 private int id;
 private boolean leaf;
 private String cls;
 private int cid;//类别ID
         set/get();
}