MyNote笔记系统(三)笔记管理篇

来源:互联网 发布:淘宝微淘直播 编辑:程序博客网 时间:2024/04/29 04:07

工程源码:http://download.csdn.net/detail/my_session/4846364


整体架构 index.jsp

/** Open the quick tips */Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';/** redefine the blank image url */var imagePath = 'http://localhost:8080/notepro/ext/resources/images';Ext.BLANK_IMAGE_URL = imagePath+'/default/s.gif';var tools = [{    id:'gear',    handler: function(){        Ext.Msg.alert('Message', 'This function need to be modified.');    }},{    id:'close',    handler: function(e, target, panel){        panel.ownerCt.remove(panel, true);    }}];/** 定义中心区域, 本系统的核心区域, 所有打开的Tab都将在该区域展示 */var centerRegion = new Ext.TabPanel({    region:'center',    deferredRender:false,    activeTab:0,    enableTabScroll:true,    listeners:{    remove: function(tp, c){    c.hide();    }    },    hideBorders:true,    autoDestroy: false,    items:[{xtype:'tabpanel' ,title: '办公桌面',iconCls: 'tabs',closable: false,frame:false,html:"<iframe scrolling='auto' frameborder='0' width='100%' height='100%' src='users/desktool/desktop.jsp'> </iframe>",items:[]}          ]});/** 这里是页面展示的开始 */Ext.onReady(function(){/** 处理ie提交数据中文乱码问题 */    Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';    new Ext.Viewport({ //实例化布局对象      layout:'border',       items:[            {                region:'west',                title:'管理界面',                id:'west-panel',                                split:true,                width: 200,                minSize: 170,                maxSize: 400,                collapsible: true,                margins:'35 0 5 5',                cmargins:'35 5 5 5',                layout:'accordion',                            layoutConfig:{                    animate:true                },                items: [   {    title:'笔记管理',    border:false,    autoScroll:true,    iconCls:'notes',    items: [treepanel]    },{    title:'我的群组',    border:false,    autoScroll:true,    iconCls:'group',    items: [grouppanel]    },{    title:'日常工具',    layout:'absolute',    border:false,    autoScroll:true,    iconCls:'tools',    items: [{    xtype:'button',    text: '<h1><font color="red"><center>日程日历</center></font></h1>',        iconCls: 'calendar',        tooltip:"这是一个日程管理工具,您可以在这里安排您的一切",        tooltipType:"title",    height:'20%',    width : '70%',    x:'15%',    y:'5%',    handler: function(){if(centerRegion.findById("calendartab")){centerRegion.setActiveTab("calendartab");return ;}centerRegion.add({title:"NoteBook日历",id:"calendartab",html:"<iframe scrolling='auto' frameborder='0' width='100%' height='100%' src='users/toolbar/calendar.jsp'> </iframe>",closable:true});centerRegion.setActiveTab("calendartab");  }},{xtype:'button',    text: '<h1><font color="red"><center>天气指南</center></font></h1>',    tooltip:"这是一个天气预报工具",        tooltipType:"title",    iconCls: 'calendar',        height:'20%',    width : '70%',       x:'15%',    y:'28%',    handler: function(){if(centerRegion.findById("weathertap")){centerRegion.setActiveTab("weathertap");return ;}centerRegion.add({title:"天气指南",id:"weathertap",html:"<iframe scrolling='auto' frameborder='0' width='100%' height='100%' src='dailylife/weather.action'> </iframe>",closable:true});centerRegion.setActiveTab("weathertap");  }},{xtype:'button',    text: '我的游戏',    iconCls: 'calendar',        height:'20%',    width : '70%',       x:'15%',    y:'51%'},{xtype:'button',    text: '我的e家',    iconCls: 'calendar',        height:'20%',    width : '70%',       x:'15%',    y:'74%'}           ]    },                    {                    title:'程序设置',                    html: '<html><body>  设置:<input type="text" name="firstname" /></body></html>',                    border:false,                    autoScroll:true,                    iconCls:'settings'                    }                    ]            },            centerRegion            ]     });    //设置皮肤的核心代码    //Ext.util.CSS.swapStyleSheet('viewport','ext/resources/css/reset-min.css');    });

笔记管理 部分代码:

var Tree = Ext.tree;var treeloader = new Tree.TreeLoader( {dataUrl : "users/treepanelload.action"});var treepanel = new Tree.TreePanel( {rootVisible : true, // 设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性border : true, // 有边框animate : true, // 动画效果autoScroll : true, // 自动滚动width:'100%',height:parent.height,enableDD : true, // 拖拽节点containerScroll : true,loader : treeloader,useArrows : true,checkModel : 'cascade', // 对树的级联多选onlyLeafCheckable : false});// 异步加载根节点var rootnode = new Tree.AsyncTreeNode( { id : 'p0',    text : '我的笔记',    draggable : false});treepanel.setRootNode(rootnode);treepanel.on('beforeload', function(node) {treepanel.loader.dataUrl = 'users/treepanelload.action?id=' + node.id; });var contextMenu = new Ext.menu.Menu( {    items : [ {    text : '新建笔记',    handler : newFileHandler    }, {    text : '新建文件夹',  handler : addFloderHandler  }, {    text : '删除文件夹',    handler : deleteHandler    }, {    text : '重命名',    handler : modifyHandler    }]    });var fileMenu = new Ext.menu.Menu( {  items : [{    text : '编辑',    handler : editHandler    }, {    text : '查看',    handler : viewHandler    }, {                text: '删除',                handler : deleteHandler },{text: '重命名',                handler : modifyHandler }]    });treepanel.on('contextmenu', treeContextHandler);  function treeContextHandler(node, event) {    event.preventDefault();  node.select();if(node.leaf) {fileMenu.show(node.ui.getAnchor());fileMenu.showAt(event.getPoint());}else {contextMenu.show(node.ui.getAnchor());    contextMenu.showAt(event.getPoint());}   } /*菜单选项处理函数:新建文件*/function newFileHandler() {var newNode = new Ext.tree.TreeNode({    text : '新建文档',leaf: true});var selectedNode = treepanel.getSelectionModel().getSelectedNode();    var pid = selectedNode.id;Ext.Ajax.request({     url:"users/treehandle!newFile",    params:{         title:'新建文档',     //flag:'newfile',     categoryid:pid   },    success: function(resp,opts) {                 var respText = Ext.util.JSON.decode(resp.responseText);                newNode.setId(respText.id);                selectedNode.appendChild(newNode);   },  failure: function(resp,opts) {  var respText = Ext.util.JSON.decode(resp.responseText);  Ext.Msg.alert('错误', respText.error);  }  }); }   /*菜单选项处理函数:编辑*/function editHandler() {    var selectedNode = treepanel.getSelectionModel().getSelectedNode();var id = selectedNode.id;var text = selectedNode.text;if(centerRegion.findById("edittab"+id)){centerRegion.setActiveTab("edittab"+id);return ;}centerRegion.add({title:text,id:"edittab"+id,html:"<iframe scrolling='auto' frameborder='0' width='100%' height='100%' src='users/treehandle!editFile?id="+id+"'> </iframe>",closable:true});centerRegion.setActiveTab("edittab"+id);}/*菜单选项处理函数:新建文件夹*/function addFloderHandler() { var newNode = new Ext.tree.TreeNode( {    text : '新建文件夹',leaf: false});    var selectedNode = treepanel.getSelectionModel().getSelectedNode();    var pid=selectedNode.id;  Ext.Ajax.request({     url:"users/treehandle!newFloder",    params:{         name:'新建文件夹',     //flag:'newfloder',     id:pid  },    success: function(resp,opts) {                  var respText = Ext.util.JSON.decode(resp.responseText);                 newNode.setId(respText.id);                 selectedNode.appendChild(newNode);  },  failure: function(resp,opts) {  var respText = Ext.util.JSON.decode(resp.responseText);  Ext.Msg.alert('错误', respText.error);  }       });  }/*菜单选项处理函数:查看*/function viewHandler (){var selectedNode = treepanel.getSelectionModel().getSelectedNode(); var id = selectedNode.id;var text = selectedNode.text;if(centerRegion.findById("viewtab"+id)){centerRegion.setActiveTab("viewtab"+id);return ;}centerRegion.add({title:text,id:"viewtab"+id,html:"<iframe scrolling='auto' frameborder='0' width='100%' height='100%' src='users/treehandle!viewFile?id="+id+"'> </iframe>",closable:true});centerRegion.setActiveTab("viewtab"+id);}/*菜单选项处理函数:删除文件 删除文件夹*/  function deleteHandler() {var treenode = treepanel.getSelectionModel().getSelectedNode();if(treenode.hasChildNodes()) {Ext.Msg.alert('提示', '不能删除非空文件夹');return ;}var nodeid= treenode.id;    Ext.Ajax.request({      url:'users/treehandle!delete',      params:{      id:nodeid  //flag:'delete'}     });      treepanel.getSelectionModel().getSelectedNode().remove();    }  /*菜单选项处理函数:重命名*/function modifyHandler() { var treeEditor = new Ext.tree.TreeEditor(treepanel, {  allowBlank : false, // 允许出现空白    cancelOnEsc : true,// 按下ESC建自动取消空白    selectOnFocus : true     });   var selectedNode = treepanel.getSelectionModel().getSelectedNode();// 得到选中的节点    pid=selectedNode.id;      treeEditor.editNode = selectedNode;    treeEditor.startEdit(selectedNode.ui.textNode);treeEditor.on("complete", function(treeEditor){Ext.Ajax.request({    url:"users/treehandle!modify",    params:{    title:treeEditor.editNode.text,        id:pid  //flag:'modify'        }     });    });    } //定义并构造西部面板var westRegion = {    region:'west',    id:'west-panel',    iconCls: 'tabs',    title:'笔记之家',    split:true,    width: 200,    minSize: 175,    maxSize: 400,    collapsible: true,    margins:'0 0 0 5',    layout:'column',    layoutConfig:{        animate:true    },    items: [             {        items:treepanel        }        ]};


原创粉丝点击