快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门新葡亰平台游戏APP:Extjs4.2 Tree使用技巧实例



本案例应用了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澳门新葡亰平台游戏APP.x Guid,UUID的天生

等等。

Demo视频:

源码共享:

///

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

}]});

/奸淫奸淫奸淫奸淫澳门新葡亰平台游戏APP奸淫奸淫奸淫奸淫奸淫奸淫奸淫奸淫/ //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

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('哀求超时或收集故障,差错编号:' + 澳门新葡亰平台游戏APPresponse.status, 9);}

});},

//获取组织架构的用户TreeNodeClick: function (view, record, item,澳门新葡亰平台游戏APP 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;

E澳门新葡亰平台游戏APPxt.each(childnodes, function () {var nd = this;

idArray.push(nd.getId());if (nd.hasChildNodes()) {

ts.GetChilds(idArray, nd);}

});}

});

您可能还会对下面的文章感兴趣: