EXTJS 트리 메뉴

트리 노드의 정의는 다음과 같습니다.

var node = new Ext.tree.TreeNode(...);

var root = new Ext.tree.TreeNode({
			text : ' ',
			url : 'pagesExt/about.jsp',
			expanded : true// 
		});
		var node1 = new Ext.tree.TreeNode({
			text : ' ',
			url : 'bookext.do?method=showBookTypeList'
		});
		var node2 = new Ext.tree.TreeNode({
			text : ' ',
			url : 'bookext.do?method=showBookList'
		});
		root.appendChild(node1);// 
		root.appendChild(node2);// 

Ext. TreePanel 사용:
TreePanel 구성 매개변수
1.animate:true//확장, 수축 애니메이션,false 시 애니메이션 효과가 없음
2.autoHeight:true//자동 높이, 기본값false
3.enableDrag:true//트리의 노드는 Drag를 드래그할 수 있습니다. Draggable이 아닙니다.
4.enableDD:true//드래그뿐만 아니라 Drag를 통해 노드의 차원 구조(drap과drop)를 변경할 수 있습니다
5.enableDrop:true//단지 drop
6.lines:true//노드 사이의 점선 막대
7.loader:Ext.tree.TreeLoader//노드 데이터 로드
8.root:Ext.tree.TreeNode//루트 노드
9.rootVisible:false//false는 루트 노드를 표시하지 않습니다. 기본값은true
10. trackMouseOver:false//false는 mouseover가 효과가 없음
11.useArrows:true//작은 화살표
TreeNode의 기본 구성 매개변수:
hrefTarget: "mainFrame"//노드 링크 주소 열기 기본값은 blank입니다. iframe 이름 id로 설정할 수 있습니다. iframe에서 열기
1.checked:false//true는 텍스트 앞에 선택된 복선상자가 있고, false는 텍스트 앞에 선택되지 않은 복선상자가 있습니다. 기본적으로 아무런 상자가 없습니다.
2.expanded:fasle//확장, 기본적으로 확장되지 않음
3.href: "http://www.cnblogs.com"//노드의 링크 주소
4.hrefTarget: "mainFrame"//노드 링크 주소 열기 기본값은 blank입니다. iframe 이름 id로 설정하면 iframe에서 열 수 있습니다.
5.leaf:true//잎사귀 노드, 상황 설정
6.qtip: "알림"//알림 정보, 하지만 Ext.QuickTips.init();하
7.text: 노드 텍스트/노드 텍스트
8.singleClickExpand:true//클릭 텍스트로 확장, 기본적으로 더블 클릭

var menu = new Ext.tree.TreePanel({
			border : false,
			root : root,
			hrefTarget : 'mainContent',
			listeners : {
				click : function(node,e){
					mainPanel.load({
						url:node.attributes.url,
						callback : function(){
							mainPanel.setTitle(node.text);
						},
						scripts: true
					});
				}
			}
			,
			tbar : [
				' ：',
				{
					xtype : 'themeChange',
					width : 80,
					listWidth : 80
				},
				'->'
			]
		});	

Ext.Viewport: 브라우저 창의 전체 디스플레이 영역을 대표합니다. 문서 바디를 렌더링 대상으로 합니다. 브라우저 창의 크기에 따라 자신의 크기를 자동으로 조정합니다.
한 페이지에 하나의 Viewport 실례만 나타날 수 있고 스크롤 막대에 대한 지원은 제공되지 않습니다.
코드는 다음과 같습니다.

    	new Ext.Viewport({
			title : 'Ext.Viewport ',
			layout:'border',// 
			items: [{
				title : ' ExtJs ',
				collapsible: true,
				html : '<br><center><font size = 6> </font></center>',
				region: 'north',// north
				height: 100
			},{
				title : ' ',
				items : menu,
				split:true,
				collapsible: true,
				region:'west',// west
				width: 150
			},{
				title: ' ',
				contentEl : 'aboutDiv',
				collapsible: true,
				id : 'mainContent',
				region:'center'// center
			}]
		});