程序化dojox.grid.DataGrid上的水平滾動條

如何保持水平滾動條不顯示？程序化dojox.grid.DataGrid上的水平滾動條

什麼，我嘗試的一個例子是在http://jsfiddle.net/fdlane/gjkGF/3/

下面是什麼，我試圖做的一個示範頁面。隨着容器div的寬度設置爲大於網格寬度，我期待水平滾動條不會顯示。

使用200px的當前高度和行數大於6的行，顯示垂直（良好）。但是，水平也顯示（壞）。

我錯過了什麼？

感謝

FDL

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css" /> 
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojox/grid/resources/Grid.css"> 
<link rel="stylesheet" type="text/css" title="Style" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojox/grid/resources/tundraGrid.css"> 
<title>Grid Scrolling</title> 
</head> 
<body class="tundra"> 
<div id="container" style="width: 350px; height: 200px"> 
    <div id="myGrid"> 
    </div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"> </script> 
<script> 
    dojo.require("dojo.store.Memory"); 
    dojo.require("dojo.data.ObjectStore"); 
    dojo.require("dojox.grid.DataGrid"); 

    dojo.ready(function() { 

     var myStore = new dojo.store.Memory({ 
      data: [{ id: "RecId1", values: "fooValue1" }, 
      { id: "RecId2", values: "fooValue2" }, 
      { id: "RecId3", values: "fooValue3" }, 
      { id: "RecId4", values: "fooValue4" }, 
      { id: "RecId5", values: "fooValue5" }, 
      { id: "RecId6", values: "fooValue6" }, 
      { id: "RecId7", values: "fooValue7" }, 
      { id: "RecId7", values: "fooValue7"}] 
     }); 

     dataStore = new dojo.data.ObjectStore({ 
      objectStore: myStore 
     }); 

     var grid = new dojox.grid.DataGrid({ 

      store: dataStore, 
      structure: [{ 
       name: "ID", 
       field: "id", 
       width: "100px" 
      }, { 
       name: "Values", 
       field: "values", 
       width: "100px" 
      }] 
     }, "myGrid"); 

     grid.startup(); 
    }); 
</script> 
</body> 
</html>

來源

2012-05-17 fdlane

這個樣式覆蓋添加到您的頭元素：

<style> 
    .dojoxGridScrollbox { overflow-x: hidden; } 
</style>

原因很可能是，當電網垂直溢出，垂直（ - y）卷軸出現並消耗寬度爲30（左右）像素，使得網格容器也在水平方向溢出

您可以嘗試使用網格調整大小功能 - 如果borderlayout.resize解決了您的問題，原因是它遞歸調整其子元素（以某個計算的abs值）。與網格，你會看到這個流程：

  resize: function(changeSize, resultSize){ 
        // summary: 
        //    Update the grid's rendering dimensions and resize it 

        // Calling sizeChange calls update() which calls _resize...so let's 
        // save our input values, if any, and use them there when it gets 
        // called. This saves us an extra call to _resize(), which can 
        // get kind of heavy. 

        // fixes #11101, should ignore resize when in autoheight mode(IE) to avoid a deadlock 
        // e.g when an autoheight editable grid put in dijit.form.Form or other similar containers, 
        // grid switch to editing mode --> grid height change --> From height change 
        // ---> Form call grid.resize() ---> grid height change --> deaklock 
        if(dojo.isIE && !changeSize && !resultSize && this._autoHeight){ 
          return; 
        } 
        this._pendingChangeSize = changeSize; 
        this._pendingResultSize = resultSize; 
        this.sizeChange(); 
      },

來源

2012-05-18 09:58:34 mschr

謝謝。這工作。我只是以爲我創建的網格錯誤或調用啓動錯誤，因爲網格（大小）不應該有水平滾動。進一步的嘗試表明，如果將網格放在整頁邊框容器的中間窗格中，則在初始頁面加載時會顯示水平滾動，但隨後瀏覽器窗口的任何大小調整都會導致滾動消失。當然，這個嘗試是在我添加你推薦的風格之前完成的。必須與.resize（）正在觸發時有關。再次感謝你的幫助。 fdl – fdlane

idd youre right，bordercontainer佈局在調整大小時調用其所有子級的大小 - 如果子級具有任何此類功能 – mschr

我只希望我瞭解如何使初始頁面加載時發生的大小調整正確隱藏水平滾動。加載頁面後觸發的大小調整然後用戶更改瀏覽器窗口確實會隱藏水平。 – fdlane

程序化dojox.grid.DataGrid上的水平滾動條

回答

相關問題