1

さまざまな dijit ウィジェットを入力する予定のいくつかの div を含む単純なページがあります。テキストを挿入しすぎると適切にスクロールする div が 1 つありますが、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

dijit.Tree で同様のスクロールの問題が発生しました。私が発見したのは、Tree が ContentPane から動作を継承することです。これは、レイアウト ポリシーに関しては、ContentPane として動作することを意味します。これが私の問題の解決策です：

css クラス:

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

クラスを「ツリー」に適用します。

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

これで問題が解決することを願っています。

よろしく

于 2016-07-06T15:33:21.447 に答える