Что вызывает мой странный графический сбой с моим додзе GridX?

Question

Я имею дело с странным сбоем с отображением моих строк GridX. Когда данные сетки обновляются после начальной загрузки данных, мой весь GridX не отображается, но я обнаружил, что если я перемещаю мышь вокруг строк, что-то заставляет остальные (скрытые строки) выскакивать и отображаться. Смотрите скриншоты:

EDIT: Кажется, я обнаружил, что когда моя мышь входит в заголовок, то это когда все выплывает. Как решить эту проблему?

После перемещения мыши над сеткой в ​​случайных движений:

Код:

 require([ 
       //Require resources. 
       "dojo/dom", 
       "dojo/store/Memory", 
     "dijit/form/Button", 
       "gridx/core/model/cache/Sync", 
       "gridx/Grid", 
       "gridx/modules/CellWidget", 
       "dojo/domReady!" 
      ], function(dom, Memory, Button, Cache, Grid){ 

      //Use dojo/store/Memory here 
      store = new Memory({ 
       data: [ 
        { id: 1, feedname: 'Feed4', startstop: 0, pause: '', config: ''}, 
        { id: 2, feedname: 'Feed5', startstop: 0, pause: '', config: ''} 
       ] 
      }); 

// TODO: I don't know what this is for: 
      //We are using Memory store, so everything is synchronous. 
      var cacheClass = "gridx/core/model/cache/Sync"; 

      var structure = [ 
          { id: 'feedname', field: 'feedname', name: 'Feed Name', width: '110px' }, 

          { id: 'startstop', field: 'startstop', name: 'Start/Stop', width: '61px', 
           widgetsInCell: true, 
           navigable: true, 
           allowEventBubble: true, 
           decorator: function(){ 
             //Generate cell widget template string 
             return [ 
               '<div style="text-align: center"><button data-dojo-type="dijit.form.Button" ', 
               'onClick="onStartStopButtonClick();" ', 
               'data-dojo-attach-point="btn" ', 
               'class="startStopButtonPlay" ', 
               'data-dojo-props="iconClass:\'startStopButtonPlayIcon\'" ', 
               '></button></div>' 
             ].join(''); 
           }, 
           setCellValue: function(data){ 
             //"this" is the cell widget 
             this.btn.set('label', data); 
           } 
          }, 

          { id: 'pause', field: 'pause', name: 'Pause', width: '61px', 
           widgetsInCell: true, 
           navigable: true, 
           allowEventBubble: true, 
           decorator: function(){ 
             //Generate cell widget template string 
             return [ 
               '<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ', 
               'onClick="onPauseButtonClick();" ', 
               'data-dojo-attach-point="btn2" ', 
               'class="pauseButton" ', 
               'data-dojo-props="iconClass:\'pauseIcon\'" ', 
               '></button></div>' 
             ].join(''); 
           },                
           setCellValue: function(data){ 
             //"this" is the cell widget 
             this.btn2.set('label2', data); 
           } 
          }, 

          { id: 'config', field: 'config', name: 'Config', width: '61px', 
           widgetsInCell: true, 
           navigable: true, 
           allowEventBubble: true, 
           decorator: function(){ 
             //Generate cell widget template string 
             return [ 
               '<div style="text-align: center"><button data-dojo-type="dijit/form/Button" ', 
               'onClick="onConfigButtonClick();" ', 
             'data-dojo-attach-point="btn3" ', 
               'class="configButton" ', 
               'data-dojo-props="iconClass:\'configIcon\'" ', 
               '></button></div>' 
             ].join(''); 
           }, 
           setCellValue: function(gridData, storeData, cellWidget){ 
             //"this" is the cell widget 
             cellWidget.btn3.set('label3', data); 
           } 
          } 
      ]; 

       //Create grid widget. 
       grid = Grid({ 
        id: 'grid', 
        cacheClass: Cache, 
        store: store, 
        structure: structure, 
        autoHeight: true, 
        columnWidthAutoResize: false 
       }); 

       //Put it into the DOM tree. 
       grid.placeAt('compactWidgetGrid'); 

       //Start it up. 
       grid.startup(); 

       updateGridData(Memory, store); 
      }); 

function updateGridData(Memory, store){ 

    grid.model.clearCache(); 

    newStore = new Memory({ 
     // TODO: Replace data here with actual feed data received from PICTE server! 
     data: [ 
      { id: 1, feedname: 'testingThis1', startstop: 0, pause: '', config: ''}, 
      { id: 2, feedname: 'testingThis2', startstop: 0, pause: '', config: ''}, 
      { id: 3, feedname: 'testingThis3', startstop: 0, pause: '', config: ''}, 
      { id: 4, feedname: 'testingThis4', startstop: 0, pause: '', config: ''}, 
      { id: 5, feedname: 'testingThis5', startstop: 0, pause: '', config: ''}, 
      { id: 6, feedname: 'testingThis6', startstop: 0, pause: '', config: ''}, 
      { id: 7, feedname: 'testingThis7', startstop: 0, pause: '', config: ''} 
     ] 
    }); 

    // reset store 
    grid.setStore(newStore); 

    // Update grid data 
    grid.model.store.setData(newStore); 

    // Refresh the GridX 
    grid.body.refresh(); 

} 

Answer 1

Удаление autoHeight: true, решить эту проблему.