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视频:

Extjs4.2 Tree使用技巧小结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

你可能感兴趣的:(extjs4)