Question

我不确定这是否是Dojo或CSS特定问题。

我正在尝试将两个Dojo DataGrids垂直放置在一个容器中，其中底部网格的底部不会超出容器的底部，并且两个网格之间的分割器将使网格增大或缩小，因为它是移动。当分离器向上移动时，它应该放大底部网格的显示，但只能到达显示所有项目的点。

当我向上移动分离器时，整个底部网格上下移动。我尝试了包含显示此图像的图像，但我没有足够的重复点。

现在我的布局看起来像这样：

dojo.require("dijit.layout.BorderContainer");
dojo.require("dojox.grid.DataGrid");

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>

<body class="tundra">
  <div id="appLayout" class="demoLayout" 
       data-dojo-type="dijit.layout.BorderContainer" 
       data-dojo-props="design:'headline'">
    <div class="demoLayout" 
         data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="title:'Results', design:'headline', region:'center', splitter:false">

      <div class="leftPanel" 
           data-dojo-type="dijit.layout.BorderContainer" 
           data-dojo-props="design:'headline', region:'left', splitter:false">

        <div data-dojo-type="dijit.layout.ContentPane" 
             data-dojo-props="region:'top'">
          <h2>ContentPane</h2>
        </div>

        <div id="grid1" 
             data-dojo-type="dojox.grid.DataGrid" 
             data-dojo-props="region:'center', columnReordering:'true', keepSelection:'true', splitter:false">
        </div>

        <div id="grid2" 
             data-dojo-type="dojox.grid.DataGrid" 
             data-dojo-props="region:'bottom', columnReordering:'true', keepSelection:'true', splitter:true">
        </div>
      </div>
    </div>
  </div>

我是否使用CSS锚定底部网格？我的两个DataGrids之间需要什么东西吗？谢谢你的任何指示。如果需要，我可以在后台包含Javascript。

两个Dojo DataGrids之间的分割器

0 个答案: