ExtJS treeとpanel
2024 ワード
ExtJS左には右パネルがあり、バックグラウンド管理画面を構築するために使用されます.
注意する必要があるのは、treeNodeの中のchildrenは必ず葉っぱのノードがあって、つまりleaf:trueがあって、さもなくば循環して再帰的に呼び出されます.
注意する必要があるのは、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>