1
我有一个简单的页面有几个div，我打算用各种dijit小部件填充。如果插入太多文本，我有一个正确滚动的div，但如果插入dijit树，则树项会溢出div，但不会发生滚动。代码如下，样式内联清晰。我愿意为树使用声明模式，如果这样可以使它更容易，但也许你可以告诉我如何解决它，使dijitTree会留在它自己的div和滚动。dijit树溢出div但不滚动
谢谢。下面的代码：
<html>
<head>
<title>Test dijit Tree Overflow</title>
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/tundra/tundra.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/dijit.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
</script>
<script type="text/javascript">
var snidTree = [{ id: 'tn1', label: 'Tree Node 1', },{ id: 'tn2', label: 'Tree Node 2', },{ id: 'tn3', label: 'Tree Node 3', },{ id: 'tn4', label: 'Tree Node 4', },{ id: 'tn5', label: 'Tree Node 5', },{ id: 'tn6', label: 'Tree Node 6', },{ id: 'tn7', label: 'Tree Node 7', },{ id: 'tn8', label: 'Tree Node 8', },{ id: 'tn9', label: 'Tree Node 9', },{ id: 'tn10', label: 'Tree Node 10', },{ id: 'tn11', label: 'Tree Node 11', },{ id: 'tn12', label: 'Tree Node 12', },{ id: 'tn13', label: 'Tree Node 13', },{ id: 'tn14', label: 'Tree Node 14', },{ id: 'tn15', label: 'Tree Node 15', },{ id: 'tn16', label: 'Tree Node 16', },{ id: 'tn17', label: 'Tree Node 17', },{ id: 'tn18', label: 'Tree Node 18', },{ id: 'tn19', label: 'Tree Node 19', },{ id: 'tn20', label: 'Tree Node 20', },{ id: 'tn21', label: 'Tree Node 21', },{ id: 'tn22', label: 'Tree Node 22', },{ id: 'tn23', label: 'Tree Node 23', },{ id: 'tn24', label: 'Tree Node 24', },{ id: 'tn25', label: 'Tree Node 25', },{ id: 'tn26', label: 'Tree Node 26', },{ id: 'tn27', label: 'Tree Node 27', },{ id: 'tn28', label: 'Tree Node 28', },{ id: 'tn29', label: 'Tree Node 29', },{ id: 'tn30', label: 'Tree Node 30', },{ id: 'tn31', label: 'Tree Node 31', },{ id: 'tn32', label: 'Tree Node 32', },{ id: 'tn33', label: 'Tree Node 33', },{ id: 'tn34', label: 'Tree Node 34', },{ id: 'tn35', label: 'Tree Node 35', },{ id: 'tn36', label: 'Tree Node 36', },{ id: 'tn37', label: 'Tree Node 37', },{ id: 'tn38', label: 'Tree Node 38', },{ id: 'tn39', label: 'Tree Node 39', },{ id: 'tn40', label: 'Tree Node 40', } ];
function prepare() {
var store = new dojo.data.ItemFileReadStore({
data: { identifier: 'id', label : 'label', items: snidTree }
});
var treeModel = new dijit.tree.ForestStoreModel({ store: store });
var treeControl = new dijit.Tree({
model: treeModel,
showRoot: false,
_createTreeNode: function(/*Object*/ args){
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
return tnode;
},
onClick: function(c,n,e) {
myTreeClick(this,c,n,e);
}
}, "left");
}
dojo.ready(prepare);
function myTreeClick(tree,child,node,event) {
dojo.byId("footer").innerHTML = child.label + " was clicked";
}
</script>
</head>
<body class="tundra">
<div id='header' style="width:100%;
background: #FC8;
position: absolute;
height: 30px;
font-size: 150%;
text-align: center;
top: 0;">HEADING GOES HERE</div>
<div id='middle' style="width:100%;
background: #8FC;
position: absolute;
top: 30px;
bottom: 30px;">
<div id='left' style="background: #FFF;
position: absolute;
overflow: scroll;
left: 0;
top: 0;
width: 25%;
height: 100%;">
</div>
<div id='right' style="background: #CF8;
position: absolute;
left: 25%;
top: 0;
width: 75%;
height: 100%;">
<div id='charts' style="background: #DF7;
position: absolute;
width: 100%;
top:0;
height:60%;">
CHARTS GO HERE
</div>
<div id='sliders' style="background: #BF9;
position: absolute;
width: 100%;
bottom:0;
height:40%;">
SLIDERS GO HERE
</div>
</div>
</div>
<div id='footer' style="width:100%;
background: #8CF;
position: absolute;
height: 30px;
font-size: 100%;
bottom: 0;">footer</div>
</body>
</html>
的jsfiddle这里：https://jsfiddle.net/n3yhqcte/ :) – GibboK