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 ：
HTML页面调用：
转载于：http://www.zjava.net/a/web/extjs/2011/0405/806.html
定义对象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