Горизонтальные полосы прокрутки на программном dojox.grid.DataGrid

Как я могу предотвратить отображение горизонтальной полосы прокрутки?

Примером того, что я пытаюсь сделать, является http://jsfiddle.net/fdlane/gjkGF/3/

Ниже приведен пример страницы того, что я пытаюсь сделать. Поскольку ширина контейнера контейнера больше ширины сетки, я ожидал, что горизонтальные полосы прокрутки не будут отображаться.

Используя текущую высоту 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>
Источник

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();
            },
Источник
Другие вопросы по тегам