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);
}
});
}
});