Extjs tree 的简单增删改查

1. js:  
2.   
3. Ext.onReady(function() {  
4.   
5.  // 树形面板  
6.  var tree = new Ext.tree.TreePanel({  
7.     id : 'tree-mianban',  
8.     title : '树',  
9.     region : 'west',  
10.     animate : true,  
11.     enableDD : true,  
12.     containerScroll : false,  
13.     loader : new Ext.tree.TreeLoader({  
14.        dataUrl : 'scripts/advancedTree01.json'  
15.       }),  
16.     lines : true,  
17.     // selModel : new Ext.tree.MultiSelectionModel(),  
18.     containerScroll : false,  
19.     border : true  
20.    });  
21.  // 根节点  
22.  var root = new Ext.tree.AsyncTreeNode({  
23.   text : '木叶',  
24.   draggable : false,  
25.   id : 'root'  
26.    // /children : json  
27.   });  
28.  // 树形编辑器  
29.  var treeEditer = new Ext.tree.TreeEditor(Ext.getCmp('tree-mianban'), {  
30.   id : 'tree-Manage',  
31.   allowBlank : false  
32.    // 输入值不可以为空  
33.   });  
34.  // 弹出窗口  
35.  var win = new Ext.Window({  
36.     maskDisabled : false,  
37.     id : 'tree-window',  
38.     modal : true,// 是否为模式窗口  
39.     constrain : true,// 窗口只能在viewport指定的范围  
40.     closable : true,// 窗口是否可以关闭  
41.     closeAction : 'hide',  
42.     layout : 'fit',  
43.     width : 300,  
44.     height : 200,  
45.     plain : true,  
46.     items : [{  
47.        id : 'tree-window-view',  
48.        border : false  
49.       }]  
50.    });  
51.   
52.  // 给tree添加事件  
53.  tree.on('rightClickCont', tree.rightClick, tree);  
54.   
55.      
56.  // 模块销毁函数  
57.  function destroy() {  
58.   this.win.destroy();// 将win窗口销毁，否则在IE中会报错  
59.  }  
60.   
61.  // 本例的主角，加载 tree TreePanel  
62.  tree.setRootNode(root);  
63.  tree.render(document.body);  
64.  root.expand(true, true);  
65.   
66.  // 定义右键菜单  
67.  var rightClick = new Ext.menu.Menu({  
68.     id : 'rightClickCont',  
69.     items : [{  
70.        id : 'addNode',  
71.        text : '添加',  
72.        // 增加菜单点击事件  
73.        menu : [{  
74.           id : 'insertNode',  
75.           text : '添加兄弟节点',  
76.           handler : function(tree) {  
77.              
78.            insertNode();  
79.           }  
80.   
81.          }, {  
82.           id : 'appendNode',  
83.           text : '添加儿子节点',  
84.           handler : function(tree) {  
85.              
86.            appendNodeAction();  
87.           }  
88.          }]  
89.       }, '-', {  
90.        id : 'delNode',  
91.        text : '删除',  
92.        handler : function(tree) {  
93.   
94.         delNodeAction();  
95.        }  
96.       }, {  
97.        id : 'modifNode',  
98.        text : '修改',  
99.        handler : function() {  
100.   
101.         modifNodeAction()  
102.        }  
103.       }, {  
104.        id : 'viewNode',  
105.        text : '查看',  
106.        handler : function(tree) {  
107.   
108.         veiwNodeAction();  
109.        }  
110.       }]  
111.    });  
112.  // 添加点击事件  
113.  tree.on('click', function(node) {  
114.     if (node.id != 'root') {  
115.      // alert(node.id);  
116.      alert('我是：' + node.text + ',我的id是' + node.id + '');  
117.     }  
118.    });  
119.   
120.  // 增加右键弹出事件  
121.  tree.on('contextmenu', function(node, event) {// 声明菜单类型  
122.     event.preventDefault();// 这行是必须的，使用preventDefault方法可防止浏览器的默认事件操作发生。  
123.      
124.     node.select();  
125.     rightClick.showAt(event.getXY());// 取得鼠标点击坐标，展示菜单  
126.    });  
127.   
128.  // 添加兄弟节点事件实现  
129.  function insertNode() {  
130.   
131.   var selectedNode = tree.getSelectionModel().getSelectedNode();  
132.   
133.   var selectedParentNode = selectedNode.parentNode;  
134.    
135.   var newNode = new Ext.tree.TreeNode({  
136.      text : '新建节点' + selectedNode.id  
137.     });  
138.   if (selectedParentNode == null) {  
139.    selectedNode.appendChild(newNode);  
140.   } else {  
141.    selectedParentNode.insertBefore(newNode, selectedNode);  
142.   }  
143.   
144.   setTimeout(function() {  
145.      treeEditor.editNode = newNode;  
146.      treeEditor.startEdit(newNode.ui.textNode);  
147.     }, 10);  
148.  };  
149.   
150.  // 添加子节点事件实现  
151.  function appendNodeAction() {  
152.     
153.   var selectedNode = tree.getSelectionModel().getSelectedNode();  
154.   if (selectedNode.isLeaf()) {  
155.    selectedNode.leaf = false;  
156.   }  
157.   var newNode = selectedNode.appendChild(new Ext.tree.TreeNode({  
158.      text : '新建节点' + selectedNode.id  
159.     }));  
160.   newNode.parentNode.expand(true, true, function() {  
161.      tree.getSelectionModel().select(newNode);  
162.      setTimeout(function() {  
163.         treeEditor.editNode = newNode;  
164.         treeEditor.startEdit(newNode.ui.textNode);  
165.        }, 10);  
166.     });// 将上级树形展开  
167.  }  
168.  // 删除节点事件实现  
169.  function delNodeAction() {  
170.     
171.   var selectedNode = tree.getSelectionModel().getSelectedNode();  
172.   // 得到选中的节点  
173.   selectedNode.remove();  
174.  };  
175.  // 修改节点事件实现  
176.  function modifNodeAction() {  
177.   
178.   var selectedNode = tree.getSelectionModel().getSelectedNode();// 得到选中的节点  
179.   treeEditor.editNode = selectedNode;  
180.   treeEditor.startEdit(selectedNode.ui.textNode);  
181.  };  
182.  // 查看事件实现  
183.  function veiwNodeAction() {  
184.    
185.   var viewPanel = Ext.getCmp('tree-window-view');  
186.   var selectedNode = tree.getSelectionModel().getSelectedNode();  
187.   // 得到选中的节点  
188.   var tmpid = selectedNode.attributes.id;  
189.   var tmpname = selectedNode.attributes.text;  
190.   var tmpdes = selectedNode.attributes.des;  
191.   
192.   win.setTitle(tmpname + '的介绍');  
193.   win.show();  
194.   
195.   var dataObj = {  
196.    id : tmpid,  
197.    name : tmpname,  
198.    des : tmpdes  
199.   }  
200.   var tmpTpl = new Ext.Template([  
201.     '<div style="margin:10px"><div style="margin:10px">编号:{id}</div>',  
202.     '<div style="margin:10px">名称:{name}</div>',  
203.     '<div style="margin:10px">描述:{des}</div></div>']);  
204.   
205.   tmpTpl.overwrite(viewPanel.body, dataObj);  
206.   
207.  };  
208.   
209. });  
210.   
211.   
212. html:  
213.   
214. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
215. <html>  
216. <head>  
217. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
218. <title>Drag and Drop between 2 TreePanels</title>  
219. <link rel="stylesheet" type="text/css"  
220.  href="D:/ext-2.2.1/resources/css/ext-all.css" />  
221. <script type="text/javascript"  
222.  src="D:/ext-2.2.1/adapter/ext/ext-base.js"></script>  
223. <script type="text/javascript" src="D:/ext-2.2.1/ext-all.js"></script>  
224. <script type="text/javascript" src="./treelip.js"></script>  
225. </head>  
226. <div></div>  
227. <body>  
228. </body>  
229. </html>  
230.   
231. json:  
232.   
233. [  
234.   {  
235.    "text":"卡卡西班",  
236.    "id":"01",  
237.    "allowDrag":false,  
238.    "des":"最强的组合！",  
239.     "children":[  
240.     {"text":"小樱","id":"0101","allowDrag":false,"des":"一个很可爱的女孩！","children":[  
241.             {"text":"小樱1","id":"010101","leaf":true,"allowDrag":true,"des":"一个很可爱的女孩！"},  
242.             {"text":"鸣人1","id":"010202","leaf":true,"allowDrag":true,"des":"四代火影的儿子！"},  
243.             {"text":"佐助1","id":"010303","leaf":true,"allowDrag":true,"des":"为了杀自己哥哥而活着的男人！"}  
244.              ]  
245.     },  
246.     {"text":"鸣人","id":"0102","leaf":true,"allowDrag":true,"des":"四代火影的儿子！"},  
247.     {"text":"佐助","id":"0103","leaf":true,"allowDrag":true,"des":"为了杀自己哥哥而活着的男人！"}  
248.    ]  
249.   },  
250.   {  
251.    "text":"凯班",  
252.    "id":"02",  
253.    "allowDrag":false,  
254.    "des":"有一个很白痴的老师！",  
255.    "children":[  
256.     {"text":"小李","id":"0201","leaf":true,"allowDrag":true,"des":"他的努力意识值得任何人学习！"},  
257.     {"text":"宁次","id":"0202","leaf":true,"allowDrag":true,"des":"白眼族的天才忍者！"},  
258.     {"text":"天天","id":"0203","leaf":true,"allowDrag":true,"des":"她救活了一个暗器公司！"}  
259.    ]  
260.   }  
261.  ]