menu.js

anewssystem新闻发布系统集成使用了spring hibernate freemarker EXTJS等开源框架 可以作为学习参考

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [e-mail]
 *
 * http://www.extjs.com/license
 *
 * @author Lingo
 * @since 2007-09-06
 * http://code.google.com/p/anewssystem/
 */
Ext.onReady(function(){
    // 打开提示功能
    Ext.QuickTips.init();

    // ====================================================
    // 开始构造树形
    // ====================================================
    var treeloader = new Ext.tree.TreeLoader({dataUrl:'getAllTree.htm'});
    var tree = new Ext.tree.TreePanel('main', {
        animate:false,
        containerScroll: true,
        enableDD:true,
        lines: true,
        loader: treeloader
    });
    // 不使用自动排序
    //new Ext.tree.TreeSorter(tree, {folderSort:true});
    tree.el.addKeyListener(Ext.EventObject.DELETE, removeNode);

    // ====================================================
    // 工具栏
    // ====================================================
    var tb = new Ext.Toolbar(tree.el.createChild({tag:'div'}));
    tb.add({
        text: '新增子分类',
        icon: '../widgets/images/list-items.gif',
        cls: 'x-btn-text-icon album-btn',
        tooltip: '添加选中节点的下级分类',
        handler: createChild
    }, {
        text: '新增兄弟分类',
        icon: '../widgets/images/list-items.gif',
        cls: 'x-btn-text-icon album-btn',
        tooltip: '添加选中节点的同级分类',
        handler: createBrother
    }, {
        text: '修改分类',
        icon: '../widgets/images/list-items.gif',
        cls: 'x-btn-text-icon album-btn',
        tooltip: '修改选中分类',
        handler: updateNode
    }, {
        text: '删除分类',
        icon: '../widgets/images/list-items.gif',
        cls: 'x-btn-text-icon album-btn',
        tooltip:'删除一个分类',
        handler:removeNode
    }, '-', {
        text: '排序',
        icon: '../widgets/images/list-items.gif',
        cls: 'x-btn-text-icon album-btn',
        tooltip:'保存排序结果',
        handler:save
    }, '-', {
        text: '展开',
        icon: '../widgets/images/list-items.gif',
        cls: 'x-btn-text-icon album-btn',
        tooltip:'展开所有分类',
        handler:expandAll
    }, {
        text: '关闭',
        icon: '../widgets/images/list-items.gif',
        cls: 'x-btn-text-icon album-btn',
        tooltip:'关闭所有分类',
        handler:collapseAll
    }, {
        text: '刷新',
        icon: '../widgets/images/list-items.gif',
        cls: 'x-btn-text-icon album-btn',
        tooltip:'刷新所有节点',
        handler:refresh
    });

    // ====================================================
    // 工具栏操作函数
    // ====================================================
    function createChild() {
        var sm = tree.getSelectionModel();
        var n = sm.getSelectedNode();
        if (!n) {
            n = tree.getRootNode();
        } else {
            n.expand(false, false);
        }
        createNode(n);
    }
    function createBrother() {
        var n = tree.getSelectionModel().getSelectedNode();
        if (!n) {
            Ext.Msg.alert('提示', "请选择一个节点");
        } else if (n == tree.getRootNode()) {
            Ext.Msg.alert('提示', "不能为根节点增加兄弟节点");
        } else {
            createNode(n.parentNode);
        }
    }
    function createNode(n) {
        var node = n.appendChild(new Ext.tree.TreeNode({
            id:-1,
            text:'请输入分类名',
            cls:'album-node',
            allowDrag:true,
            allowDelete:true,
            allowEdit:true,
            allowChildren:true
        }));
        tree.getSelectionModel().select(node);
        setTimeout(function(){
            ge.editNode = node;
            ge.startEdit(node.ui.textNode);
        }, 10);
    }
    function updateNode() {
        var n = tree.getSelectionModel().getSelectedNode();
        if (!n) {
            Ext.Msg.alert('提示', "请选择一个节点");
        } else if (n == tree.getRootNode()) {
            Ext.Msg.alert('提示', "不能为根节点增加兄弟节点");
        } else {
            setTimeout(function(){
                ge.editNode = n;
                ge.startEdit(n.ui.textNode);
            }, 10);
        }
    }
    function removeNode() {
        var sm = tree.getSelectionModel();
        var n = sm.getSelectedNode();
        if(n && n.attributes.allowDelete){
            tree.getSelectionModel().selectPrevious();
            tree.el.mask('正在与服务器交换数据...', 'x-mask-loading');
            var hide = tree.el.unmask.createDelegate(tree.el);
            Ext.lib.Ajax.request(
                'POST',
                'removeTree.htm',
                {success:hide,failure:hide},
                'id='+n.id
            );
            n.parentNode.removeChild(n);
        }
    }
    function appendNode(node, array) {
        if (!node || node.childNodes.length < 1) {
            return;
        }
        for (var i = 0; i < node.childNodes.length; i++) {
            var child = node.childNodes[i];
            array.push({id:child.id,parentId:child.parentNode.id});
            appendNode(child, array);
        }
    }
    function save() {
        // 向数据库发送一个json数组，保存排序信息
        tree.el.mask('正在与服务器交换数据...', 'x-mask-loading');
        var hide = tree.el.unmask.createDelegate(tree.el);
        var ch = [];
        appendNode(root, ch);
        Ext.lib.Ajax.request(
            'POST',
            'sortTree.htm',
            {success:hide,failure:hide},
            'data='+encodeURIComponent(Ext.encode(ch))
        );
    }
    function collapseAll(){
        ctxMenu.hide();
        setTimeout(function(){
            root.eachChild(function(n){
               n.collapse(true, false);
            });
        }, 10);
    }
    function expandAll(){
        ctxMenu.hide();
        setTimeout(function(){
            root.eachChild(function(n){
               n.expand(false, false);
            });
        }, 10);
    }
    function refresh() {
        tree.root.reload();
        tree.root.expand(true, false);
    }

    // ====================================================
    // 树节点的即时编辑器
    // ====================================================
    var ge = new Ext.tree.TreeEditor(tree, {
        allowBlank:false,
        blankText:'请添写名称',
        selectOnFocus:true
    });
    ge.on('beforestartedit', function(){
        var node = ge.editNode;
        if(!node.attributes.allowEdit){
            return false;
        } else {
            node.attributes.oldText = node.text;
        }
    });
    ge.on('complete', function() {
        var node = ge.editNode;
        // 如果节点没有改变，就向服务器发送修改信息
        if (node.attributes.oldText == node.text) {
            node.attributes.oldText = null;
            return true;
        }
        var item = {
            id: node.id,
            text: node.text,
            parentId: node.parentNode.id
        };

        tree.el.mask('正在与服务器交换数据...', 'x-mask-loading');
        var hide = tree.el.unmask.createDelegate(tree.el);
        var doSuccess = function(responseObject) {
            eval("var o = " + responseObject.responseText + ";");
            ge.editNode.id = o.id;
            hide();
        };
        Ext.lib.Ajax.request(
            'POST',
            'insertTree.htm',
            {success:doSuccess,failure:hide},
            'data='+encodeURIComponent(Ext.encode(item))
        );