最近项目里使用dojo做界面，设想的界面大概是这个样子。
从整个界面layout来看，使用table来做是一个简单有效地方式：
<div title="${uiParams.tracePopupTitle}" data-dojo-type="dijit/TitlePane" data-dojo-props="toggleable: false" class="asc-container" style="margin: 0px 0px;">
<div class="button-area"></div>
<table class="traceTable">
<tr>
<div class="traceDescription">${uiParams.traceDescription}</div>
</tr>
<tr>
<td class="nodetrace">
<div data-dojo-props="" data-dojo-attach-point="instancesSelect"></div>
</td>
<td width="5px"></td>
<td style="vertical-align: top">
<div class="plainGrid">
<div data-dojo-props="" data-dojo-attach-point="nodataDisplay">
</div>
<div class="asc-container" style="padding: 0px 30 0px 30px" data-dojo-type="dijit/layout/TabContainer"
data-dojo-attach-point="loggerTabContainer"
data-dojo-props="tabPosition:'top',useMenu: false,useSlider: false,doLayout: false,class: 'firstLevelTab'" >
</div>
</div>
<div class="node-applyall" data-dojo-attach-point="nodeApplyAll">
<input id="applyToAll" name="applyToAll" data-dojo-type="dijit/form/CheckBox" data-dojo-attach-point="applyToAllCheckBox" value="${commonNls.applyToAll}" /> <label for="applyToAll">${uiParams.applyToAllInfo}</label>
</div>
</td>
</tr>
</table>
<div class="node-button-Box">
<button type="button" class="btn btn-primary" data-dojo-attach-event="click:_onCancel" data-dojo-attach-point="cancelButton" title="${commonNls.cancelInfo}">
${commonNls.cancel}
</button>
<button type="button" class="btn btn-primary" data-dojo-attach-event="click:_onSubmit" data-dojo-attach-point="submitButton" title="${commonNls.saveInfo}">
${commonNls.save}
</button>
</div>
</div>
<div class="button-area">
<div class="button-Box">
<div style="padding: 0px 30px">
<button type="button" class="btn btn-secondary" id="close" data-dojo-attach-event="click:_onClose">
${commonNls.close}
</button>
</div>
</div>
</div>
</div>
这里右边的table里有两个重要的对像，其一是一个TabContainer用来显示真正的数据，id为loggerTabContainer; 另一个是没有数据时用来显示的GridX,其id为nondataDisplay。
这里在buildRendering里面初始化左边的grid和nodatadisplay grid，并且发送rest request到server端请求数据，注册callback处理右边界面的显示。在server数据没有fetch完成之前，显示nodatadisplay。
</pre><pre name="code" class="javascript"> buildRendering: function() {
this.inherited(arguments);
var slef = this;
this._initInstanceSelect();
this._initNonDataTabs()
this._refreshLoggerInstanceFromServer();
}
_initNonDataTabs: function() {
console.log("_initNonDataTabs start");
var slef = this;
var beanName = "nondata";
var loggerTabObj = new NodeTraceLoggerListTab({
beanName: beanName,appName: slef.appName,gridId: slef._getLoggerGridId(beanName)
},slef.nls);
var loggerGrid = loggerTabObj.loggerGrid;
loggerGrid.title = "";
loggerTabObj.refreshList([]);
domConstruct.place(loggerGrid.domNode,this.nodataDisplay);
console.log("_initNonDataTabs done");
},
这里_refreshPlianGrid方法是在callback里面调用的，也就是说根据server返回数据，如果该instace没有数据，对应的loggerData为空，就显示nodataDisplay这个grid，否则显示loggertabcontainer。
_refreshPlainGrid: function()
function isEmpty(obj) {
for (var i in obj) {
return false;
}
return true;
}
if (isEmpty(this.loggersData)) {
style.set(this.nodataDisplay,"display","block");
style.set(this.loggerTabContainer.domNode,"none");
style.set(this.nodeApplyAll,"none");
} else {
style.set(this.nodataDisplay,"none");
style.set(this.loggerTabContainer.domNode,"block");
if (this.loggersData["bunyan"]) {
this.applyToAllCheckBox.set("disabled",true);
this.applyToAllCheckBox.set("title",this.nls.disableApplyAllExplaination);
}
style.set(this.nodeApplyAll,"block");
this.loggerTabContainer.layout();
}
},
对这个定制的widget我们命名为MyPopup，当我们实际使用时，发现一个奇怪的现象，nondataDisplay这个GridX的宽度总是50000px。这个界面右边一直延伸出来。经研究发现这个50000px的宽度是在loggerTabContainer初始化的HTML代码片段里面设置的。
</pre><pre name="code" class="html"><div class="nowrapTabStrip dijitTabContainerTop-tabs dijitTabNoLayout" data-dojo-attach-point="containerNode" data-dojo-attach-event="onkeydown:onkeydown" role="tablist"></div>
.nowrapTabStrip {
display: block;
position: relative;
text-align: left;
width: 50000px;
z-index: 1;
}
问题是，为什么loggerTabContainer的设置会影响到另一个widget GridX的宽度呢？inspect loggerTabContainer发现其因为display=none已经为0x0大小。
而且，如果把初始化nondataDisplay GridX这个对象的初始化放到callback里面去做，而不是再buildRendering()里面，nondataDisplay GridX的宽度又会变得正常。
//buildRendering不再初始化nondataDisplay Grid，而是由callback函数在server端数据fetch完以后再生成。
buildRendering: function() {
this.inherited(arguments);
var slef = this;
this._initInstanceSelect();
this._refreshLoggerInstanceFromServer();
}
_refreshPlainGrid: function() {
function isEmpty(obj) {
for (var i in obj) {
return false;
}
return true;
}
self._initNonDataTabs()
if (isEmpty(this.loggersData)) {
style.set(this.nodataDisplay,
要回答这个问题，有两个比较重要的知识点需要牢牢把握：
1. css的块级元素，行内元素和表元素。
我们知道，<div>是块级元素,<span>是行内元素，<tr>是表元素。每种元素在界面上UI rendering的时候，盒模型的计算方式是有很大差别的。对于块级元素，有最大的儿子节点决定，对于行内元素，由其文字图像等显示内容决定，特别的，对于表元素，由于要保持每个儿子节点都是统一的宽度或者高度，每个孩子节点都会受到约束；
2.dojo widget的生命周期。
dojo widget的生命周期大致分为create(包括postMixInProperties,buildRendering,postCreate等)和startup，前者初始化该widget，包括所有孩子widget的创建，HTML代码片段的实例化和装配，dom节点的生成等。而startup方法会计算widget的一些layout，显示正确的外观。
基于这两点基础知识，让我们回头看看我们这个的Mypopup widget的生命周期，
Mypopup startup阶段：初始化左边的Data grid并startup (instance select)，初始化右边的tabcontainer并startup，
non data gridx 是在整个widget startup以后，在document上直接生成。而在document上place GridX时，宽度就可以正确的根据此时<tr>的宽度计算得出。
nondatadisplay是在buildRendering阶段生成，之后在Mypopup widget startup()时，调用Widget.startup()方法，该方法会对popup html 里面data-dojo-type显示指定的dijit widget(_startupWidget)进行初始化，这里包括：
TitlePane,TabContainer,Button. 每个startup Widget starup方法会被调用，注意这里通过递归调用的方式(深度调用)完成了所有widget的startup工作。
TitlePane startup时，由于它是一个layoutWidget,其layout()方法会被调用，layout()方法又会调用_layoutChildren()方法，，其children widget的resize()方法会被调用，根据界面关系，TitlePane的子widget包括
Gird (select)
GridX (non data)
TabConatiner
Button
GirdX 的resize()方法被调用，JS会计算每个column的宽度，而此时TabContainer的div的宽度还是50000,没有计算过的(TabContainer的layout()方法会在GridX startup之后调用），这里注意 GridX和TabContainer由于在一个tr中，根据 css 表布局，会取最大子节点的宽度。而此时TabContainer clientWidth=50000! 所以JS计算后，GridX认为自己是width=50000，会把这个值写到dom节点上。
下一步，TabContainer也会调用自己的 resize()方法，不幸的是，此时<tr>元素的宽度已经被之前GridX的宽度限制在了50000，所以此刻即使TabContiner resize()方法被调用，也没有办法重新根据window布局计算真正的width.
注意这里即使调整nodatadisplay 和loggerTabContainer的前后顺序也是无济于事，因为这两个widget的HTML代码片段完成以后，整个mypopup dom节点放到html page时，这个<tr>元素的宽度已经是50000。这是因为表元素的性质决定的。
<div class="plainGrid">
<div class="asc-container" style="padding: 0px 30 0px 30px" data-dojo-type="dijit/layout/TabContainer"
data-dojo-attach-point="loggerTabContainer"
data-dojo-props="tabPosition:'top',class: 'firstLevelTab'" >
</div>
<div data-dojo-props="" data-dojo-attach-point="nodataDisplay">
</div>
</div>
一个简单的html例子可以展示这一点：
<head> </head> <body> <div id="parent"> <div style="width:100px;height:60px"> this is first div </div> <div style="width:50000px;height:40px"> this is second div </div> </div> <table id="parent2"> <tr> <td style="width:50px"> </td> <td> <div style="width:100px;height:60px"> this is first div </div> <div style="width:50000px;height:40px"> this is second div </div> </td> </tr> </table> </body>
_adaptWidth(skip=false,noEvent=1)ColumnWidth.js (line 307)
_onUpdateWidth()ColumnWidth.js (line 125)
anonymous()dojo.j...ssed.js (line 12735)
dispatcher()dojo.j...ssed.js (line 17544)
reLayout()HLayout.js (line 109)
(?)()HLayout.js (line 72)
notify()dojo.j...ssed.js (line 4473)
then(resolvedCallback=
function(),errorCallback=undefined,progressCallback=undefined)dojo.j...ssed.js (line 4616)
(?)()_Module.js (line 250)
dispatcher()dojo.j...ssed.js (line 17544)
resize(changeSize=undefined)Grid.js (line 168)
_layoutChildren()_Conte...ixin.js (line 184)
_layout(changeSize=undefined,resultSize=undefined)_Conte...ixin.js (line 161)
_onShow()_Conte...ixin.js (line 231)
inherited__debug(args=[],a1=undefined,a2=undefined)dojo.j...ssed.js (line 7256)
_onShow()ContentPane.js (line 360)
startup()_Conte...ixin.js (line 58)
inherited__debug(args=[],a2=undefined)dojo.j...ssed.js (line 7256)
startup()ContentPane.js (line 203)
startup(w=
[Widget dijit.TitlePane,dijit_TitlePane_0] { _attachPoints=[8],_attachEvents=[2],_inherited={...},more...})_Widge...ixin.js (line 103)
layout()_TabCo...Base.js (line 114)
resize(changeSize=undefined,resultSize=undefined)_LayoutWidget.js (line 142)
inherited__debug(args=[],a2=undefined)dojo.j...ssed.js (line 7256)
resize()StackContainer.js (line 124)
_layoutChildren()_Conte...ixin.js (line 184)
_layout(changeSize=undefined,more...})_Widge...ixin.js (line 103)
<div class="management">
<div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props='style: "width:1300px; height:600px; border: 2px solid blue;"'>
<!-- top view: title -->
<div title="${uiParams.tracePopupTitle}" data-dojo-type="dijit/TitlePane" data-dojo-props='toggleable: false,region:"top",style:"margin:0px 0px"' class="asc-container">
<div class="traceDescription">${uiParams.traceDescription}</div>
</div>
<!-- left view: instance select table-->
<div data-dojo-type="dijit/layout/ContentPane" class="nodetrace traceTable" data-dojo-props='region:"leading",splitter:true,style:"margin:0px 0px;width:150px;height:200px"'>
<div data-dojo-props="" data-dojo-attach-point="instancesSelect"></div>
</div>
<!-- right view: logger data table-->
<div data-dojo-type="dijit/layout/ContentPane" class="plainGrid" data-dojo-props='region:"center",style:"margin:0px 0px"'>
<div class="asc-container" style="padding: 0px 30 0px 30px" data-dojo-type="dijit/layout/TabContainer"
data-dojo-attach-point="loggerTabContainer"
data-dojo-props="tabPosition:'top',class: 'firstLevelTab'" >
</div>
<div data-dojo-props="" data-dojo-attach-point="nodataDisplay"></div>
<div class="node-applyall" data-dojo-attach-point="nodeApplyAll">
<input id="applyToAll" name="applyToAll" data-dojo-type="dijit/form/CheckBox" data-dojo-attach-point="applyToAllCheckBox" value="${commonNls.applyToAll}" /> <label for="applyToAll">${uiParams.applyToAllInfo}</label>
</div>
<div class="node-button-Box">
<button type="button" class="btn btn-primary" data-dojo-attach-event="click:_onCancel" data-dojo-attach-point="cancelButton" title="${commonNls.cancelInfo}">
${commonNls.cancel}
</button>
<button type="button" class="btn btn-primary" data-dojo-attach-event="click:_onSubmit" data-dojo-attach-point="submitButton" title="${commonNls.saveInfo}">
${commonNls.save}
</button>
</div>
</div>
<!-- bottom view: close -->
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom",style:"margin:0px 0px;height:50px"'>
<div class="button-area">
<div class="button-Box">
<div style="padding: 0px 30px">
<button type="button" class="btn btn-secondary" id="close" data-dojo-attach-event="click:_onClose">
${commonNls.close}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
这里附上widget stautup的代码分析：
//这里_startupWidgets 是dojo parserwidget templated html 里面data-dojo-type显示指定的dijit widget的列表。
_WidgetsInTemplatedMixin
startup: function(){
array.forEach(this._startupWidgets,function(w){
if(w && !w._started && w.startup){
w.startup();
}
});
this._startupWidgets = null;
this.inherited(arguments);
}
//这里getChildren()方法会返回container attatch point内的所有子widget
//对应popup template没有
//对应titlepane template即grid,gridX,tabcontainer,button等。
_WidgetBase
startup: function(){
// summary:
// Processing after the DOM fragment is added to the document
// description:
// Called after a widget and its children have been created and added to the page,
// and all related widgets have finished their create() cycle,up through postCreate().
//
// Note that startup() may be called while the widget is still hidden,for example if the widget is
// inside a hidden dijit/Dialog or an unselected tab of a dijit/layout/TabContainer.
// For widgets that need to do layout,it's best to put that layout code inside resize(),and then
// extend dijit/layout/_LayoutWidget so that resize() is called when the widget is visible.
if(this._started){
return;
}
this._started = true;
array.forEach(this.getChildren(),function(obj){
if(!obj._started && !obj._destroyed && lang.isFunction(obj.startup)){
obj.startup();
obj._started = true;
}
});
},
每个widget只启动一次，标志位_started可以用来检测是否startup过。