何时调用 DGrid.startup() - 过早调用会导致渲染效果不佳答案

【问题标题】：When to call DGrid.startup() - Calling it too early results in bad rendering何时调用 DGrid.startup() - 过早调用会导致渲染效果不佳
【发布时间】：2014-03-31 15:46:20
【问题描述】：

我在使用 Dojo 中的 dgrid 组件时遇到了一些困难。我正在尝试构建一个包含 dgrid 的小部件。

dgrid 渲染如下：

调整浏览器窗口大小后，一切正常，显示如下：

我认为我遇到的问题与过早调用 grid.startup() 函数有关。当我将对 grid.startup() 的呼叫延迟 10 秒时（请参阅代码的注释部分），一切都按预期工作。

这是我的代码：

define([
        // ...
    ],
    function(
        // ...
    ) {
        return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin] ,{
            templateString: template,

            startup: function(){

                this.inherited(arguments);
                var store = new Memory({data: this.someArray});
                var grid = new (declare([OnDemandGrid, DijitRegistry]))({
                    store: store,
                    columns: {
                        name: "Name column" 
                    }
                }, this.gridDiv);

                // If I wrap startup in this - everything is fine.  
                // window.setInterval(function(){
                grid.startup();
                // }, 1000*10);
            }
        });
    }
);

这是我正在使用的模板：

<div style="height:100%">
    <table border="1">
        <tr>
            <td>
                <button data-dojo-attach-point="addBtn" data-dojo-type="dijit/form/Button">Add item</button>
                <div data-dojo-attach-point="gridDiv"></div>

            </td>
            <td>
                Insert Summary here.
            </td>
        </tr>
    </table>
</div>

问题：这里发生了什么？我应该在哪里调用 dgrid 上的启动？

【问题讨论】：

标签： dojo dgrid

【解决方案1】：

正如预期的那样，问题在于过早调用启动方法 - 但是小部件本身没有问题。

遇到的问题与父小部件有关。父小部件（TabContainer）未正确启动。这是父小部件的工作方式：

创建新的 TabContainer：var tc = new TabContainer({...});
新建内容窗格：var cp1 = new ContentPane({content: <the above widget>, ...});
将 ContentPane 添加到 TabContainer：tc.addChild(cp1);
在 TabContainer 上调用启动：tc.startup();

把顺序改成这个，问题解决了：

创建新的 TabContainer：var tc = new TabContainer({...});
在 TabContainer 上调用启动：tc.startup();
新建内容窗格：var cp1 = new ContentPane({content: <the above widget>, ...});
将 ContentPane 添加到 TabContainer：tc.addChild(cp1);

【讨论】：