TreePanel和TabPanel （笔记系统）

（这是我做过的一个笔记管理系统的部分功能笔记管理 主要是TreePanle和TabPanel的使用）

以下是核心代码：

	
	var Tree = Ext.tree;
	var treeloader = new Tree.TreeLoader( {
		dataUrl : "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 = '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:"http://localhost:8080/pnote/users/treehandle.action",   
				 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='http://localhost:8080/pnote/users/treehandle.action?id="+id+"&flag=editfile'> </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:"http://localhost:8080/pnote/users/treehandle.action",   
				 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='http://localhost:8080/pnote/users/treehandle.action?id="+id+"&flag=viewfile'> </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:'http://localhost:8080/pnote/users/treehandle.action',  		  
		  		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:"http://localhost:8080/pnote/users/treehandle.action",  
				  	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
        }
        ]
};

/** 定义中心区域, 本系统的核心区域, 所有打开的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='http://localhost:8080/pnote/users/desktool/desktop.jsp'> </iframe>",
					items:[]
				}
          ]
});