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