1

水平スクロール バーが表示されないようにするにはどうすればよいですか?

私が試みていることの例は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>
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 に答える