Dojo 自定义小部件未在内容窗格内呈现答案

【问题标题】：Dojo Custom widget not rendering inside content paneDojo 自定义小部件未在内容窗格内呈现
【发布时间】：2015-10-28 07:47:51
【问题描述】：

我有一个自定义小部件：

 define([
         ......],

 function (...){

 return decalre('ownerWidget', [....],{

 templateString: template,

 postCreate: function () {

  this.inherited(arguments);

  var data ={

     identifier:'id',
     label: 'id',
     items: [{
          id:'28'
          owner: 'Fred',
          attendingId: '1',
          numberOfVisits: '3',
          vetCostsThisYear: '4',
          complaints: '0',
          children[{
              id : '29',
              pet:'Mario',
              numberOfVisits: '3',
              vetCostsThisYear: '4',
              complaints: '0'

           }]

   }]
};

var store = new ItemFileWriteStore({data:data});
var model = new ForestStoreModel({store : store, childrenAttrs:    ['children']});

var layout = [
{name: 'Owner', field:'owner', width: '40%'},
{name: 'Pet', field: 'pet', width: '40%'},
{name: 'Attending Id', field:'attendingId', width: '5%'},
{name: 'Visits', field: 'numberOfVisits', width: '5%'}];

var gridTree = new LazyTreeGrid({
    treeModel: model, 
    structure: layout
}, document.createElement('div'));


 this.gridTreeNode.appendChild(gridTree.domNode);
 }
 });

 });

这个模板：

 <div data-dojo-attach-point="gridTreeNode" style="height: 100%; width: 100%"></div>

然后在另一个小部件模板中声明小部件，如下所示：

<div class="grid" data-dojo-attach-point="byOwner" data-dojo-type="dijit/layout/ContentPane"></div>

上述声明的javascript：

 this.byOwner.set('title', "Owner");
 this.byOwner.set('content', "ownerWidget");

我得到一个灰色背景，选项卡显示正确的标题，但网格似乎没有呈现，我可以看到网格有一个 dom 树，但我只是没有在页面上看到网格。

我不确定我在这里缺少什么，没有任何错误或警告。

道场版本 1.10.0

【问题讨论】：

起初我可以说：你有一个错字decalre，你忘了打电话给gridTree.startup()...可能不止这些...
声明确实是一个错字，我不小心删除了它，当我将它重新输入问题时，我对dojo的理解是，如果你声明性地声明一个小部件，那么启动是由解析器处理的？
startup 由解析器创建的组件会自动执行（就像使用声明性语法时一样）。但是，在您的情况下，您以编程方式创建了gridTree，因此您需要手动调用startup
啊，我明白了，所以如果小部件是以编程方式创建的，我是否以声明方式声明一个实例并不重要，我仍然需要在我的小部件中调用启动？
在您的情况下，ownerWidget 将自动启动，但不是子小部件

标签： dojo widget nested

【解决方案1】：

这是一个启动问题。您需要在正确的时刻手动启动组件（否则计算会出错）。调用placeAt 方法将为您处理（见最后一行）：

define([
    /*......*/
],

function( /*...*/ ) {

    return declare('ownerWidget', [ /*....*/ ], {

        templateString: template,

        postCreate: function() {

            this.inherited(arguments);

            var data = {

                identifier: 'id',
                label: 'id',
                items: [{
                    id: '28'
                    owner: 'Fred',
                    attendingId: '1',
                    numberOfVisits: '3',
                    vetCostsThisYear: '4',
                    complaints: '0',
                    children[{
                        id: '29',
                        pet: 'Mario',
                        numberOfVisits: '3',
                        vetCostsThisYear: '4',
                        complaints: '0'

                    }]

                }]
            };

            var store = new ItemFileWriteStore({
                data: data
            });
            var model = new ForestStoreModel({
                store: store,
                childrenAttrs: ['children']
            });

            var layout = [{
                name: 'Owner',
                field: 'owner',
                width: '40%'
            }, {
                name: 'Pet',
                field: 'pet',
                width: '40%'
            }, {
                name: 'Attending Id',
                field: 'attendingId',
                width: '5%'
            }, {
                name: 'Visits',
                field: 'numberOfVisits',
                width: '5%'
            }];

            var gridTree = new LazyTreeGrid({
                treeModel: model,
                structure: layout
            }, document.createElement('div'));

            gridTree.placeAt(this.gridTreeNode, 'last');
        }
    });

});

【讨论】：