EXT TreePanel可以看看

var contacterTree = new Ext.tree.TreePanel({
                 id:"treePanelContact",
                 border:false,
                 lines:false,   // 去掉树的线
                 rootVisible:true,             
                 autoScroll:true,
                 animate:true,   
                 width:200,               
                 height : 468,
                 style:"background-color:#FFFFFF;border-color:#0099FF;",               
                //    enableDD: false,  // 允许树可以拖拽
                 containerScroll: true,
                 loader: new Ext.tree.TreeLoader({
                       dataUrl:'<%=path%>/treeOperation.do?action=loadTree'
                 }),
                 root:new Ext.tree.AsyncTreeNode({
                    id : "treeContact",
                       text: '联系人',
                       draggable:false,                                
                       expanded: true   // 展开根节点下的节点
                 }),
                 listeners:{
                    click : function(node){
                        if(node.id == "treeContact"){
                            // 如果点击的是根节点，则 GridPanel 显示所有的数据
                            store.load({params:{flag:'all'}});
                        }
                        else if(node.isLeaf() == true){
                            // 如果点击的是枝节点的话，则根据 ID 查询联系人的信息
                            store.load({params:{flag:'contacter',contacterId:node.id}});                               
                        }else{
                            // 如果既不是根节点也不是枝节点，那么点击的就是分组节点，
                            // 则 GridPanel 显示对应分组号的联系人信息
                            store.load({params:{flag:'group',groupId:node.id}});
                        }                       
                    }
                 }
               });
              
               // 添加 树的右键菜单
               contacterTree.on('contextmenu', menuShow);
            function menuShow ( node )
            {
                treeRightMenu.show(node.ui.getAnchor());
                node.select();//让右击是选中当前节点               
            };

               
           var treeRightMenu = new Ext.menu.Menu({
                 id: 'treeMenuContext',
                 items: [
                 {
                     text: '搜索联系人',
                     icon:"../images/shared/icons/fam/search.gif",
                     handler:function()
                        {
                            Search_Contacter("搜索联系人");
                        }
                 },                
                 {
                     text: '添加联系人',
                     icon:"../images/shared/icons/fam/add.gif",
                     handler:function()
                        {
                            AddContacter("新增联系人");
                        }
                 },{
                     text: '添加分组',
                     icon:"../images/shared/icons/fam/add.gif",
                     handler:function()
                        {
                            AddContacterGroup("新增分组");
                        } 
                 },{
                     text: "删除",
                     icon: "../images/shared/icons/fam/delete.gif",
                     handler:function()
                        {
                            treeDelContacter();
                        }
                 }
                 ]
           });