Extjs tree 动态树的实现和右键编辑等操作

来源:互联网 发布:阿里云系统盘使用情况 编辑:程序博客网 时间:2024/05/16 16:22

<script type="text/javascript">
        document.oncontextmenu = function() { return false; } //屏蔽右键 ,IE6下会有问题
        Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
        Ext.onReady(function() {
            //设置树形面板
            var Tree = Ext.tree;
            // set the root node
            var root = new Tree.AsyncTreeNode({
                text: '我的品牌',
                draggable: false,
                id: 'M0'
            });
            //默认读取根节点的数据  
            var loader = new Ext.tree.TreeLoader({
            dataUrl: "../TreeLoader.ashx?id=M0&type=mag&op=get&url=MyManage.aspx",
                requestMethod: 'GET',
                listeners: {
                    "loadexception": function(loader, node, response) {
                        //加载服务器数据,直到成功
                        node.loaded = false;
                        node.reload.defer(100, node);
                    }
                }
            });
            var tree = new Tree.TreePanel({
                id: 'myTree',
                el: 'tree-div',
                autoScroll: true,
                root: root,
                animate: true,
                enableDD: false,
                border: false,
                rootVisible: false,
                loadMask: true,
                containerScroll: true,
                loader: loader
            });
            //绑定节点右键菜单功能
            tree.on('contextmenu', function(node, event) {
                event.preventDefault(); //关闭默认的菜单,以避免弹出两个菜单
                var nodemenu = new Ext.menu.Menu({
                    items: [{
                        text: "移出品牌",
                        iconCls: 'leaf',
                        handler: function() {
                            Ext.Ajax.request({
                                url: '../TreeLoader.ashx?op=Delete&id=' + node.id, //根据id删除节点
                                success: function(request) {
                                    tree.body.mask('Loading', 'x-mask-loading');
                                    tree.root.reload();
                                    tree.root.expand(true, false);
                                    setTimeout(function() { // mimic a server call
                                        tree.body.unmask();
                                        tree.root.expand(true, false);
                                    }, 100);

                                },
                                failure: function() {
                                    alert("移出失败!");
                                }
                            });
                        }
}]
                    });
                    nodemenu.showAt(event.getXY()); //取得鼠标点击坐标,展示菜单
                });
                tree.setRootNode(root);

                // render the tree
                tree.render();
                tree.root.expand(true, false);
            })
    </script>