프로그래밍 방식의 가로 스크롤 막대 dojox.grid.DataGrid

어떻게 가로 스크롤 막대를 계속 표시 할 수 있습니까? http://jsfiddle.net/fdlane/gjkGF/3/프로그래밍 방식의 가로 스크롤 막대 dojox.grid.DataGrid

아래는 내가 할 시도하고있는 무슨의 예제 페이지는에

내가 시도하고있는 무슨의 예입니다. 컨테이너 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) scroller가 나타나서 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-18 09:58:34 mschr

감사합니다. 이것은 효과가 있었다. 나는 그리드가 잘못되었거나 시작이 잘못되었다고 생각했다. 그리드가 수평 스크롤을 가져서는 안되기 때문이다. 추가 시도는 전체 페이지 테두리 컨테이너의 가운데 창에 표를 놓으면 처음 페이지로드시 가로 스크롤이 표시되지만 브라우저 창의 크기를 조정하면 스크롤이 사라지게됩니다. 물론, 당신이 추천 한 스타일을 추가하기 전에이 시도가 끝났습니다. .resize()가 실행될 때와 관련이 있어야합니다. 도와 줘서 고마워. fdl – fdlane

idd youre right, bordercontainer 레이아웃은 크기가 변경 될 때 모든 자식에 대해 크기 조정을 호출합니다. 자식에 그러한 기능이있는 경우 – mschr

처음 페이지로드시 발생하는 크기 조정을 올바르게 가로 스크롤을 숨기는 방법을 이해하고 싶습니다. 페이지가로드 된 다음 사용자가 브라우저 창을 변경 한 후 실행되는 크기 조정은 가로를 올바르게 숨 깁니다. – fdlane

프로그래밍 방식의 가로 스크롤 막대 dojox.grid.DataGrid

답변

관련 문제