ExtJs tree 静态树(从本地获取数据源)

定义对象 SimpleTreePanel： /* *操作面板 */ SimpleTreePanel=Ext.extend(Ext.tree.TreePanel,{ //菜单 menu: null , //构造方法 constructor: function (){ this .menu= new Ext.menu.Menu({ items:[{ text: 添加 , handler: this .onInse
定义对象SimpleTreePanel ：

/*  
 * 操作面板  
 */ 
SimpleTreePanel = Ext.extend(Ext.tree.TreePanel, {  
 
 
            //菜单  
            menu : null,  
              
            //构造方法  
            constructor : function() {  
 
                this.menu = new Ext.menu.Menu({  
                   items : [{  
                       text : "添加"  ,  
                       handler : this.onInsertNode,  
                       scope : this 
                   },{  
                       text : "删除"  ,  
                       handler : this.onDeleteNode,  
                       scope : this 
                   },{  
                       text : "修改",  
                       handler : this.onUpdateNode,  
                       scope : this 
                   }]                      
                });  
 
                SimpleTreePanel.superclass.constructor.call(this, {  
                            // 渲染  
                            renderTo : Ext.getBody(),  
                            // 宽度  
                            width : 200,  
                            // 高度  
                            height : 400,  
                            // 树的加载器  
                            //loader : new Ext.tree.TreeLoader(),  
                            // 根节点  
                            root : new Ext.tree.AsyncTreeNode({  
                                        text : "人力资源管理系统",  //根节点名称  
                                        id:"1",  //节点编号(如果是远程数据源,这个id将会被隐式提交,而在服务端获取该id参数不是id,是node)  
                                        children : [{ //根节点的子节点  
                                            text : "人力资源档案管理",  
                                            children : [{  //当前节点的子节点  
                                                text : "登记",  
                                                leaf : true    //指定  
                                            },{  
                                                text : "复核和查询",  
                                                leaf : true 
                                            },{  
                                                text : "变更和永久删除",  
                                                leaf : true 
                                            },{  
                                                text : "删除和恢复",  
                                                leaf : true 
                                            }]  
                                          },{  
                                            text: "招聘管理",  
                                            children : [{  
                                                text : "职位发布管理",  
                                                leaf : true 
                                            },{  
                                                text : "简历管理",  
                                                leaf : true 
                                            },{  
                                                text : "招聘考试管理",  
                                                leaf : true 
                                            },{  
                                                text : "招聘考试题库管理",  
                                                leaf : true 
                                            },{  
                                                text : "录用管理",  
                                                leaf : true 
                                            }]  
                                         },{  
                                            text: "薪酬管理",  
                                            children : [{  
                                                text : "薪酬发放管理",  
                                                leaf : true 
                                            },{  
                                                text : "薪酬标准管理",  
                                                leaf : true 
                                            }]  
                                         },{  
                                            text: "调动管理",  
                                            children : [{  
                                                text : "登记",  
                                                leaf : true 
                                            },{  
                                                text : "审核",  
                                                leaf : true 
                                            },{  
                                                text : "查询",  
                                                leaf : true 
                                            }]  
                                         },{  
                                            text: "统计报表",  
                                            children : [{  
                                                text : "人员基本信息",  
                                                leaf : true 
                                            },{  
                                                text : "薪酬分布",  
                                                leaf : true 
                                            }]  
                                        }]  
                                    }),  
                            //监听事件  
                            listeners:{  
                                "contextmenu":{  
                                    fn:this.onContextmenu,  
                                    scope:this 
                                 }  
                            }  
                        });  
            },  
            //右击菜单点击事件  
            onContextmenu : function(_node,_e){  
                //为menu动态创建一个currentNode属性  
                this.menu["currentNode"]=_node;  
                //将右击菜单显示出来  
                this.menu.showAt(_e.getXY());  
            },  
            //添加节点事件  
            onInsertNode : function(){  
                Ext.Msg.prompt("请输入要添加的节点名称","节点名称:",this.onInsertNodePrompt,this);  
            },  
            //删除节点事件  
            onDeleteNode : function(_node,_e){  
                Ext.Msg.confirm("系统提示","你是否要删除此节点",this.onDeleteNodeConfirm,this);  
            },  
            //修改事件  
            onUpdateNode : function(){  
                //alert(this.menu["currentNode"].text);  
                Ext.Msg.prompt("请输入修改后的名称","名称",this.onUpdateNodePrompt,this,false,this.menu["currentNode"].text);  
            },  
            //prompt确定按钮事件  
            onUpdateNodePrompt : function(_btn,_text){  
                if(_btn=="ok"){  
                    this.menu["currentNode"].setText(_text);  
                }  
            },  
            //confirm确定按钮  
            onDeleteNodeConfirm : function(_btn){  
                if(_btn=="yes"){  
                  this.menu["currentNode"].remove();  
                }  
            },  
            //添加节点prompt确定  
            onInsertNodePrompt : function(_btn,_text){  
                if(_btn=="ok"){  
                    //每次点击添加时,将当前节点变为非叶子节点  
                    this.menu["currentNode"].leaf=false;  
                    //给当前节点追加一个子叶子节点  
                    this.menu["currentNode"].appendChild(new Ext.tree.AsyncTreeNode({  
                            text : _text,   
                            leaf : true, //是否为叶子节点  
                            id:Ext.id()  //使用Ext动态生成id机制  
                    }));  
                    //展开节点  
                    this.menu["currentNode"].expand();  
                }  
            }  
        }); 

HTML页面调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 
<script language="javascript" src="js/ext-base.js"></script> 
<script language="javascript" src="js/ext-all.js"></script> 
<script language="javascript" src="js/ext-lang-zh_CN.js"></script> 
<script language="javascript" src="js/SimpleTreePanel.js"></script> 
<script language="javascript"> 
  Ext.onReady(function(){  
    new SimpleTreePanel();  
  });  
</script> 
<title>LocalSimpleTreePanel</title> 
</head> 
 
<body> 
</body> 
</html> 

转载于：http://www.zjava.net/a/web/extjs/2011/0405/806.html

评论

1 楼 k_kid9157 2011-11-10  

很棒！
学习了
感谢分享！