Extjs4.2 Tree使用技巧小结demo
本案例使用了Ext.Tree.Panel的如下知识点：
1.刷新、重新加载Tree，定位到上次的节点位置
2.Tree的右键操作
3.Extjs4.x Tree获取当前选中的节点
4.新增、修改、删除Tree节点
5.修改tree节点的属性，例如text，iconCls，leaf等
6.treedata rest proxy
7.treeStore.sync的同步回调方法
8.Extjs4.x Tree获取父节点，获取子节点Chirldrens
9.Extjs4.x TreePanel的展开，收缩
10.Extjs4.x Tree的拖拽操作treeviewdragdrop插件，响应类型有before，after，append
11.Extjs4.x Guid，UUID的生成
等等。
Demo视频：
源码共享：
/// <reference path="../../Ext.js" /> Ext.define("WMS.view.OrgTree", { extend: 'Ext.tree.Panel', alias: 'widget.OrgTree', id: 'orgTreePanel', width: 200, region: 'west', animate: true, autoScroll: true, rootVisible: true, store: 'OrgTree', loadMsg: true, title: '组织架构', iconCls: 'User', border: false, viewConfig: { plugins: { ptype: 'treeviewdragdrop', appendOnly: false } }, collapsible: true,//是否可以折叠 split: true, tools: [{ type: 'expand', handler: function () { Ext.getCmp("orgTreePanel").expandAll(); } }, { type: 'collapse', handler: function () { Ext.getCmp("orgTreePanel").collapseAll(); } }] }); /************************************/ //Controller Ext.define('WMS.controller.Org', { extend: 'Ext.app.Controller', stores: ['OrgUser', 'OrgTree'], models: ['OrgUser'], views: ['OrgTb', 'OrgTree', 'OrgTreeContextMenu', 'OrgUserGrid'], refs: [ { ref: 'orgTree', selector: 'OrgTree' }, { ref: 'orgUserGrid', selector: 'OrgUserGrid' }, { ref: 'orgTreeContextMenu', selector: 'OrgTreeContextMenu', autoCreate: true, xtype: 'OrgTreeContextMenu' } ], init: function () { this.control({ 'OrgTree': { itemcontextmenu: this.ShowRightMenu, itemclick: this.TreeNodeClick }, 'OrgTreeContextMenu': { click: this.RightMenuClick }, 'OrgTree > treeview': { drop: this.OrgDragDrop }, 'OrgUserGrid button[action=btnDelete]': { click: function () { alert("btnDelete 删除"); } }, 'OrgUserGrid button[action=btnReload]': { click: function () { alert("btnReload 刷新"); } } }); }, //显示右键菜单 ShowRightMenu: function (view, record, item, index, event) { event.preventDefault(); var menu = this.getOrgTreeContextMenu(); view.select(); menu.showAt(event.getXY()); }, //响应右键菜单单击 RightMenuClick: function (menu, item, event, opts) { //获取选中的node tree = this.getOrgTree(); selNode = tree.getSelectionModel().selected.items[0]; treeStore = this.getOrgTree().getView().getTreeStore(); console.log(item.iconCls); switch (item.iconCls) { case 'Reload': idPath = selNode.getPath("id"); tree.getStore().load({ node: tree.getRootNode(), callback: function () { tree.expandPath(idPath, 'id'); } }); break; case 'ChartOrganisationAdd': Ext.MessageBox.prompt("新增组织架构", "名称：", function (button, text) { if (button == "ok") { if (Ext.util.Format.trim(text) != "") { //设置新增节点，如果本来就是子节点，那么设置子节点leaf为false //console.log(Ext.data.IdGenerator.get('uuid').generate()); selNode.appendChild({ text: text, leaf: true, iconCls: 'Group', id: Ext.data.IdGenerator.get('uuid').generate() }); if (selNode.get("leaf")) { selNode.set("leaf", false); selNode.set("iconCls", ""); } selNode.expand(); treeStore.sync(); } } }); break; case 'ChartOrgInverted': if (selNode.data.id == "00000000-0000-0000-0000-000000000000") { Ext.Tools.Msg("根节点不允许修改！", 9); return; } Ext.MessageBox.prompt("修改组织名称", "新名称：", function (button, text) { if (button == "ok") { if (Ext.util.Format.trim(text) != "") { if (selNode.data.text != text) { /* 在修改值的情况下，请求处理 */ selNode.set("text", text); treeStore.sync(); } } } }, this, false, selNode.data.text); break; case 'ChartOrganisationDelete': if (selNode.data.id == "00000000-0000-0000-0000-000000000000") { Ext.Tools.Msg("根节点不允许删除！", 9); return; } if (!selNode.data.leaf) { Ext.Tools.Alert("警告", "系统仅支持您删除叶子节点！","E"); return; } Ext.MessageBox.confirm("警告", "是否要删除该“"+selNode.data.text+"”组织架构？请确认该组织下已无用户！", function (button, text) { if (button == "yes") { parentNode = selNode.parentNode; nextSibling = selNode.nextSibling; //console.log(selNode.getPath("id")); selNode.remove(); if (parentNode.childNodes.length <= 0) { parentNode.set("leaf", true); parentNode.set("iconCls", "Group"); } treeStore.sync({ success: function (batch, options) { rst = Ext.JSON.decode(batch.operations[0].response.responseText); if (rst.result != 0) { parentNode.insertBefore(selNode, nextSibling); tree.getSelectionModel().select(selNode); } } }); } }); break; case 'UserAdd': break; case 'GroupAdd': break; case 'UserCross': break; case 'StatusInvisible': break; } }, //树拖拽操作 OrgDragDrop:function (node, data, overModel, dropPosition, eOpts) { Ext.Ajax.request({ url: '/Admin/Org/DragDrop', method: 'POST', params: { movedId: data.records[0].getId(), referenceId: overModel.getId(), dropPosition: dropPosition }, success: function (response) { rst = Ext.JSON.decode(response.responseText); Ext.Tools.Msg(rst.msg, rst.result); }, failure: function (response) { Ext.Tools.Msg('请求超时或网络故障,错误编号：' + response.status, 9); } }); }, //获取组织架构的用户 TreeNodeClick: function (view, record, item, index) { var id = record.getId(); var Enode = view.getTreeStore().getNodeById(id); var idArray = new Array(); if (id != "00000000-0000-0000-0000-000000000000") { idArray.push(id); this.GetChilds(idArray, Enode); } usrstore = this.getOrgUserStore(); usrstore.getProxy().setExtraParam("ids", idArray); usrstore.load(); }, GetChilds: function (idArray, node) { ts = this; childnodes = node.childNodes; Ext.each(childnodes, function () { var nd = this; idArray.push(nd.getId()); if (nd.hasChildNodes()) { ts.GetChilds(idArray, nd); } }); } });
不想动脑子，直接获取源码的，给点辛苦费（我也是苦逼熬了好几个夜晚才弄出来）：http://item.taobao.com/item.htm?spm=0.0.0.0.sEb3r6&id=18977330762