Question

如何防止水平滚动条显示？

我正在尝试的一个例子是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>

Answer 1

将此样式覆盖添加到您的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();
            },

程序化dojox.grid.DataGrid上的水平滚动条

1 个答案: