menu.js

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

    });

    // ====================================================
    // 树型的根节点
    // ====================================================
    var root = new Ext.tree.AsyncTreeNode({
        text: '菜单',
        draggable:true,
        id:-1
    });
    tree.setRootNode(root);
    tree.render();
    // true说明展开所有节点，false说明不使用动画
    root.expand(true, false);

    // ====================================================
    // 弹出对话框
    // ====================================================
    function createNewDialog(dialogName) {
        var thisDialog = new Ext.LayoutDialog(dialogName, {
            modal:true,
            autoTabs:true,
            proxyDrag:true,
            resizable:false,
            width: 410,
            height: 300,
            shadow:true,
            center: {
                autoScroll: true,
                tabPosition: 'top',
                closeOnTab: true,
                alwaysShowTabs: false
            }
        });
        thisDialog.addKeyListener(27, thisDialog.hide, thisDialog);
        thisDialog.addButton('取消', function() {thisDialog.hide();});

        return thisDialog;
    };
    function configMenu(){
        var sm = tree.getSelectionModel();
        var n = sm.getSelectedNode();
        // Ext.MessageBox.prompt('当前菜单URL:'+n.attributes.url, '请输入新的URL:', showResultText);
        var menuData = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url:'loadData.htm?id=' + n.id}),
            reader: new Ext.data.JsonReader({},['id','name',"tip","forward","descn"]),
            remoteSort: false
        });
        menuData.on('load', function() {
            var id = menuData.getAt(0).data['id'];
            var name = menuData.getAt(0).data['name'];
            fieldName.setValue(name);
            var image = menuData.getAt(0).data['image'];
            fieldImage.setValue(image);
            var tip = menuData.getAt(0).data['tip'];
            fieldTip.setValue(tip);
            var forward = menuData.getAt(0).data['forward'];
            fieldForward.setValue(forward);
            var descn = menuData.getAt(0).data['descn'];
            fieldDescn.setValue(descn);

            var dialog;
            if (!dialog) {
                dialog = createNewDialog("a-updateInstance-dialog");
                dialog.addButton('提交', function() {
                    if (menuForm.isValid()) {
                        menuForm.submit({
                            params:{id : id},
                            waitMsg:'更新数据...',
                            reset: false,
                            failure: function(menuForm, action) {
                                Ext.MessageBox.alert('错误', action.result.errorInfo);
                            },
                            success: function(menuForm, action) {
                                Ext.MessageBox.alert('成功', action.result.info);
                                dialog.hide();
                                refresh();
                            }
                        });
                    }else{
                        Ext.MessageBox.alert('错误', '请查看错误信息');
                    }
                });

                var layout = dialog.getLayout();
                layout.beginUpdate();
                layout.add('center', new Ext.ContentPanel('a-updateInstance-inner', {title: '修改菜单信息'}));
                layout.endUpdate();

                dialog.show();
            }
        });
        menuData.load();
    }
    // 打开验证功能
    Ext.form.Field.prototype.msgTarget = 'side';
    Ext.form.Field.prototype.height = 20;
    Ext.form.Field.prototype.fieldClass = 'text-field-default';
    Ext.form.Field.prototype.focusClass = 'text-field-focus';
    Ext.form.Field.prototype.invalidClass = 'text-field-invalid';
    var fieldName = new Ext.form.TextField({
        fieldLabel: '名称',
        name: 'name',
        width:170,
        readOnly: false,
        allowBlank:false
    });
    var fieldForward = new Ext.form.TextField({
        fieldLabel: '链接',
        name: 'forward',
        width:170,
        readOnly: false,
        allowBlank:false
    });
    var fieldImage = new Ext.form.TextField({
        fieldLabel: '图标',
        name: 'image',
        width:170,
        readOnly: false,
        allowBlank: false
    });
    var fieldTip = new Ext.form.TextField({
        fieldLabel: '提示',
        name: 'tip',
        width:170,
        readOnly: false,
        allowBlank:true
    });
    var fieldDescn = new Ext.form.TextField({
        fieldLabel: '描述',
        name: 'descn',
        width:170,
        readOnly: false,
        allowBlank:true
    });
    var menuForm = new Ext.form.Form({
        labelAlign: 'right',
        url:'update.htm'
    });

    menuForm.column({width: 360, labelWidth:100, style:'margin-left:10px;margin-top:10px'});
    menuForm.fieldset(
        {id:'id', legend:'修改'},
        fieldName,
        fieldImage,
        fieldForward,
        fieldTip,
        fieldDescn
    );

    menuForm.applyIfToFields({width:255});
    menuForm.render('a-updateInstance-form');
    menuForm.end();
    function showResultText(btn, text){
        var sm = tree.getSelectionModel();
        var n = sm.getSelectedNode();
        if(btn == 'ok'){
            Ext.example.msg('数据提交中....', '请稍候');
            Ext.Ajax.request({
                url:'menu.do?method=updateMenuUrl',
                success:function(){
                    Ext.MessageBox.alert('提示', '配置成功!');
                    tree.getNodeById(n.id).reload();
                },
                failure:function(){Ext.MessageBox.alert('提示', '配置失败!');},
                params:{id:n.id,url:text}
            });
        }else{
            return;
        }
    };

    // ====================================================
    // 右键菜单
    // ====================================================
    tree.on('contextmenu', prepareCtx);
    var ctxMenu = new Ext.menu.Menu({
        id:'copyCtx',
        items: [{
            id:'展开',
            handler:expandAll,
            cls:'expand-all',
            text:'展开'
        },{
            id:'收起',
            handler:collapseAll,
            cls:'collapse-all',
            text:'收起'
        },{
            id:'remove',
            handler:removeNode,
            cls:'remove-mi',
            text: '删除'
        },{
            id:'config',
            handler:configMenu,
            text: '配置菜单'
        }]
    });
    function prepareCtx(node, e){
        node.select();
        ctxMenu.items.get('remove')[node.attributes.allowDelete ? 'enable' : 'disable']();
        ctxMenu.showAt(e.getXY());
    }

    // ====================================================
    // 拖拽
    // ====================================================
    tree.on("nodedragover", function(e){
        var n = e.target;
        if (n.leaf) {
            n.leaf = false;
        }
        return true;
    });
    // 拖拽后，就向服务器发送消息，更新数据
    // 本人不喜欢这种方式，屏蔽
/*
    tree.on('nodedrop', function(e){
        var n = e.dropNode;
        var item = {
            id: n.id,
            text: n.text,
            parentId: e.target.id
        };
        tree.el.mask('正在向服务器发送信息...', 'x-mask-loading');
        var hide = tree.el.unmask.createDelegate(tree.el);
        Ext.lib.Ajax.request(
            'POST',
            'insertTree.htm',
            {success:hide,failure:hide},
            'data='+encodeURIComponent(Ext.encode(item))
        );
    });
*/
});