Dojo DataGrid가 사용자 정의 위젯의 데이터를 채우지 않음

Question

Dojo 1.6의 사용자 정의 위젯에서 데이터 격자를 생성하려하지만 DataGrid에 해당하는 HTML 만 생성되고 Grid에는 데이터가 채워지지 않습니다. 이 HTML은 위의 코드에 의해 생성되는

<div> 
<div id="dummy"></div> 
</div> 

: - - :

여기

dojo.require("dojox.grid.DataGrid"); 
dojo.require("dojo.parser"); 

dojo.require("dijit._Widget"); 
dojo.require("dijit._Templated"); 

dojo.declare("FormGenerator", [dijit._Widget, dijit._Templated], { 

    widgetsInTemplate: true, 

    templateString: dojo.cache("widget", "templates/dummyHTML.html"), 

    postCreate : function(){ 
     this.inherited(arguments); 

      layout = 
       [ 
        { name: 'Name', field: 'name', width: '100px' }, 
        { name: 'Color', field: 'color', width: '100px' } 
       ]; 
     dataStore = { 
        data : 
        {items :[ 
        { name : 'John Doe', color: 'green' }, 
        { name : 'Jane Doe', color: 'red' } 
        ], 
        label:'name', 
        identifier:'color' 
        } 
       }; 
      var grid = new dojox.grid.DataGrid 
      (
       { 
       store: new dojo.data.ItemFileReadStore(window.dataStore), 
       autoRender : true, 
       structure: window.layout 
       }, 
       "dummy" // this id should be there in HTML . 
      ); 

      grid.startup(); 

    }, 

}); 

dummyHTML.html 템플릿입니다 -이 : 여기

사용자 정의 위젯 코드

<div id="formRequirement" widgetid="formRequirement"> 
    <div align="left" dojoattachevent="onmouseout:_mouseOut" role="grid" hidefocus="hidefocus" tabindex="0" aria-multiselectable="true" class="dojoxGrid" id="dummy" widgetid="dummy" aria-readonly="true" style="height: 0px; -moz-user-select: none;"> 
     <div role="presentation" dojoattachpoint="viewsHeaderNode" class="dojoxGridMasterHeader" style="display: none; height: 0px;"><div role="presentation" dojoattachpoint="headerNode" class="dojoxGridHeader" style="width: 1270px; left: 1px; top: 0pt;"> 
      <div role="presentation" style="width: 9000em;" dojoattachpoint="headerNodeContainer"> 
       <div role="row" dojoattachpoint="headerContentNode"> 
           <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="dojoxGridRowTable"> 
          <tbody><tr> 
           <th dndtype="gridColumn_dummy" style="width: 100px;" idx="0" class="dojoxGridCell dojoDndItem " id="dummyHdr0" role="columnheader" aria-readonly="true" tabindex="-1"> 
           <div class="dojoxGridSortNode">Name</div> 
           </th> 
           <th dndtype="gridColumn_dummy" style="width: 100px;" idx="1" class="dojoxGridCell dojoDndItem " id="dummyHdr1" role="columnheader" aria-readonly="true" tabindex="-1"><div class="dojoxGridSortNode">Color</div></th> 
          </tr> 
        </tbody> 
       </table> 
       </div> 
     </div> 
     </div></div> 
     <div role="presentation" dojoattachpoint="viewsNode" class="dojoxGridMasterView"><div role="presentation" class="dojoxGridView" id="dojox_grid__View_1" widgetid="dojox_grid__View_1" style="width: 1270px; height: 0px; left: 1px; top: 0px;"> 

     <input type="checkbox" role="presentation" dojoattachpoint="hiddenFocusNode" class="dojoxGridHiddenFocus"> 
     <input type="checkbox" role="presentation" class="dojoxGridHiddenFocus"> 
     <div role="presentation" dojoattachpoint="scrollboxNode" class="dojoxGridScrollbox" style="height: 0px;"> 
      <div role="presentation" hidefocus="hidefocus" dojoattachpoint="contentNode" class="dojoxGridContent" style="height: 64px; width: 1255px;"></div> 
     </div> 
    </div></div> 
     <div dojoattachpoint="messagesNode" style="display: none;" class="dojoxGridMasterMessages"></div> 
     <span tabindex="0" dojoattachpoint="lastFocusNode"></span> 
    </div> 
</div> 

위의 코드는 데이터를 채우지 않는 것을 볼 수 있습니다. 또한 레이아웃 및 데이터 저장소를 전역 변수로 만들었지 만 성공하지 못했음을 알 수 있습니다. 심지어 나는 DataGrid를 Template 파일 (dummyHTML.html)에 넣고 Markup에 의해 DataGrid를 초기화하려고했지만 작동하지도 않았다.

나는 무엇이 있는지 놓치고 말해줘.

감사합니다.

Answer 1

높이와 너비를 지정해야합니다. 그것들이 없으면 표가 헤더 만 렌더링됩니다.

Answer 2

먼저 dojox.grid.Datagrid 자체가 위젯이기 때문에 사용자 정의 위젯 클래스에서 "widgetInTemplate"속성을 true로 설정해야합니다. 그것은 아직 DOM에 연결되지 않은 경우

widgetInTemplate : true 

둘째, 당신은 당신의 그리드의 방법 "시작"을 호출하지 않아야합니다. "postCreate"메소드는 DOM으로부터 연결 해제 된 동안 위젯을 렌더링합니다. 이것은 dojox.grid.Datagrid가 설정되어있는 방식이 아닙니다. 실제로 dojox.grid.Datagrid는 일단 DOM에 배치되면 크기를 계산합니다. 에

1) 를 사용하여 오브젝트 그리드의에 클래스 참조를 만듭니다)

grid.startup(); 

2 호출을 제거이

this.grid = new dojox.grid.DataGrid 
... 

3)를 호출하는 방법 시작 : 다음을 수행하여 DOM에 첨부 된 객체 그리드에 대한 참조

var yourForm = new FormGenerator(); 
yourForm.placeAt("container"); 
yourForm.startup(); 

작동해야합니다 :-)