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

994582796

定义对象 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