1

我有一个包含几个 div 的简单页面，我打算用各种 dijit 小部件填充这些 div。如果我插入太多文本，我有一个 div 可以正确滚动，但是如果我插入 dijit 树，树项会溢出 div 但不会发生滚动。代码如下，为了清晰起见，内联样式。如果这会使树更容易，我愿意为树使用声明性模式，但也许你可以告诉我如何按原样修复它，以便 dijitTree 将留在自己的 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>
4

2 回答 2

0

对不起，如果它是微不足道的，但我当然希望溢出：自动设置在你想要滚动的 div 上......

于 2013-05-03T13:57:22.813 回答
0

我在 dijit.Tree 中遇到了类似的滚动问题。我发现树继承了 ContentPane 的行为，这意味着就布局策略而言，它将表现为 ContentPane。这是我的问题的解决方案：

CSS类：

.TreeHeightClass {
   height: 350;
   overflow: scroll;
}

将课程应用于您的“树”：

domClass.add(treeControl.domNode, "TreeHeightClass");

希望这能解决您的问题。

问候

于 2016-07-06T15:33:21.447 回答