Extjs4.2 Tree使用技巧

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