1

如何不显示水平滚动条？

我正在尝试的一个例子是http://jsfiddle.net/fdlane/gjkGF/3/

下面是我正在尝试做的示例页面。将容器 div 的宽度设置为大于网格宽度，我预计不会显示水平滚动条。

使用当前高度 200px 并且行数大于 6，垂直显示（良好）。但是，水平线也会显示（坏）。

我错过了什么？

谢谢

外劳

<!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>
4

1 回答 1

3

将此样式覆盖添加到您的 head 元素：

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

原因很可能是，当网格垂直溢出时，垂直（-y）滚动条出现并消耗 30（左右）像素的宽度，使得网格容器在水平方向上也溢出

您可以尝试使用网格调整大小功能 - 如果 borderlayout.resize 解决了您的问题，原因是它递归地调整其子项的大小（在某个计算的 abs 值）。使用 Grid，您会看到以下流程：

            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-18T09:58:34.350 回答