97 lines
2.5 KiB
HTML
97 lines
2.5 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||
|
|
<title>LocationBar demo</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
|
||
|
|
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
|
||
|
|
<script type="text/javascript" src="../../ext-all.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" href="LocationBar.css" />
|
||
|
|
<script type="text/javascript" src="Ext.ux.LocationBar.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
Ext.onReady(function(){
|
||
|
|
|
||
|
|
Ext.BLANK_IMAGE_URL = 'http://www.extjs.com/s.gif';
|
||
|
|
|
||
|
|
// shorthand
|
||
|
|
var Tree = Ext.tree;
|
||
|
|
|
||
|
|
var tree = new Tree.TreePanel({
|
||
|
|
el:'tree-div',
|
||
|
|
useArrows:true,
|
||
|
|
autoScroll:true,
|
||
|
|
animate:true,
|
||
|
|
enableDD:true,
|
||
|
|
containerScroll: true,
|
||
|
|
loader: new Tree.TreeLoader({
|
||
|
|
urL: ''
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
// set the root node
|
||
|
|
var root = new Tree.TreeNode({
|
||
|
|
text: 'Ext JS',
|
||
|
|
draggable:false,
|
||
|
|
id:'source'
|
||
|
|
});
|
||
|
|
// generate some child nodes
|
||
|
|
var node1 = root.appendChild(new Ext.tree.TreeNode({
|
||
|
|
text: 'Node 1',
|
||
|
|
draggable:false,
|
||
|
|
id:'node1'
|
||
|
|
}));
|
||
|
|
var node2 = root.appendChild(new Ext.tree.TreeNode({
|
||
|
|
text: 'Node 2',
|
||
|
|
draggable:false,
|
||
|
|
id:'node2'
|
||
|
|
}));
|
||
|
|
node2.appendChild(new Ext.tree.TreeNode({
|
||
|
|
text: 'Node 2-1',
|
||
|
|
draggable:false,
|
||
|
|
id:'node2-1'
|
||
|
|
}));
|
||
|
|
node2.appendChild(new Ext.tree.TreeNode({
|
||
|
|
text: 'Node 2-2',
|
||
|
|
draggable:false,
|
||
|
|
id:'node2-2'
|
||
|
|
}));
|
||
|
|
node2.appendChild(new Ext.tree.TreeNode({
|
||
|
|
text: 'Node 2-3',
|
||
|
|
draggable:false,
|
||
|
|
id:'node2-3'
|
||
|
|
}));
|
||
|
|
root.appendChild(new Ext.tree.TreeNode({
|
||
|
|
text: 'Node 3',
|
||
|
|
draggable:false,
|
||
|
|
id:'node3'
|
||
|
|
}));
|
||
|
|
|
||
|
|
tree.setRootNode(root);
|
||
|
|
|
||
|
|
var locationbar = new Ext.ux.LocationBar({
|
||
|
|
renderTo: 'locationbar-div',
|
||
|
|
height: 28,
|
||
|
|
tree: tree
|
||
|
|
});
|
||
|
|
locationbar.render();
|
||
|
|
|
||
|
|
// render the tree
|
||
|
|
tree.render();
|
||
|
|
root.expand();
|
||
|
|
node2.select();
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>TreePanel with a Locationbar</h1>
|
||
|
|
<p>Click on a node inside the tree.</p>
|
||
|
|
|
||
|
|
<div id="locationbar-div" style="overflow:auto; height:28;width:450px;border:1px solid #c3daf9;"></div>
|
||
|
|
<div id="tree-div" style="overflow:auto; height:300px;width:450px;border:1px solid #c3daf9;"></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|