ExtJS treeとpanel

2024 ワード

ExtJS左には右パネルがあり、バックグラウンド管理画面を構築するために使用されます.
    注意する必要があるのは、treeNodeの中のchildrenは必ず葉っぱのノードがあって、つまりleaf:trueがあって、さもなくば循環して再帰的に呼び出されます.
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>ExtJs_01_version</title>
	
	<link rel="stylesheet" type="text/css" href="js/ext-3.2.1/resources/css/ext-all.css" />
	<script type="text/javascript" src="js/ext-3.2.1/adapter/ext/ext-base.js" ></script>
	<script type="text/javascript" src="js/ext-3.2.1/ext-all-debug.js" ></script>
	<script type="text/javascript">  
		Ext.BLANK_IMAGE_URL = 'js/ext-3.2.1/resources/images/default/s.gif';  
	</script>  
	
	<script type="text/javascript">
		
	Ext.onReady(function(){
    var tree=new Ext.tree.TreePanel({ 
				title: '  ',
				region: 'west',
                el:'treeDiv', 
				split: true,
				width: 200,
				height: 300,
				containerScroll: true,
				//frame: true,
				border: true
                }); 
                var root=new Ext.tree.TreeNode({text:'    '}); 
                var node1=new Ext.tree.TreeNode({text:'   '}); 
                var node3=new Ext.tree.TreeNode({text:'   '}); 
                var node2=new Ext.tree.TreeNode({text:'   '}); 
                node3.appendChild(node2); 
                root.appendChild(node1); 
                root.appendChild(node3); 
                tree.setRootNode(root); 
			
	var viewPort = new Ext.Viewport({
		layout: 'border',
		items: [tree, {
			title: 'hello',
			el: 'panel',
			region: 'center',
			text: 'hello', 
			height: 100,
			width: 400
		}]
	
	});
	

});


			
	</script>
</head>

<body>
<div id="treeDiv" ></div>  
<div id='panel'></div>
</body>



</html>