是啥导致我的 dojo GridX 出现奇怪的图形故障？

Posted 2023-02-26

【中文标题】是啥导致我的 dojo GridX 出现奇怪的图形故障？

【英文标题】：What is causing my weird graphical glitch with my dojo GridX?是什么导致我的 dojo GridX 出现奇怪的图形故障？

【发布时间】：2014-11-12 18:21:24

【问题描述】：

我正在处理我的 GridX 行显示的一个奇怪故障。在初始数据加载后更新网格数据时，我的整个 GridX 不会显示，但我发现如果我在行周围移动鼠标，则会触发其余的（隐藏的行）弹出并显示。看截图：

编辑：似乎我发现当我的鼠标进入标题时，就是所有内容都弹出的时候。我该如何解决这个问题？

鼠标在网格上随机移动后：

代码：

        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(); 

【问题讨论】：

感觉在进行更改后需要进行一些“刷新”调用。鼠标悬停可能会导致个别行/单元格的刷新。

你试过 grid.refresh() 而不是 grid.body.refresh() 吗？

我尝试了grid.refresh()，但在我的萤火虫控制台中收到一条消息，指出grid.refresh() 未定义。

所以我发现了关于这个问题的另一个提示：“隐藏”的数据行，只有当我将鼠标悬停在网格标题上时才会出现！每次我重新加载我的应用程序并且我的鼠标点击标题时，一切都会像它应该的那样弹出。问题是……我该如何解决这个问题？

【参考方案1】：

删除autoHeight: true, 解决了这个问题。