最近项目里使用dojo做界面，设想的界面大概是这个样子。 从整个界面layout来看，使用table来做是一个简单有效地方式： div title="${uiParams.tracePopupTitle}" data-dojo-type="dijit/TitlePane" data-dojo
最近项目里使用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, "display", "none");
style.set(this.nodeApplyAll, "display", "none");
} else {
style.set(this.nodataDisplay, "display", "none");
style.set(this.loggerTabContainer.domNode, "display", "block");
if (this.loggersData["bunyan"]) {
this.applyToAllCheckbox.set("disabled", true);
this.applyToAllCheckbox.set("title",this.nls.disableApplyAllExplaination);
}
style.set(this.nodeApplyAll, "display", "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, "display", "block");
style.set(this.loggerTabContainer.domNode, "display", "none");
style.set(this.nodeApplyAll, "display", "none");
} else {
style.set(this.nodataDisplay, "display", "none");
style.set(this.loggerTabContainer.domNode, "display", "block");
if (this.loggersData["bunyan"]) {
this.applyToAllCheckbox.set("disabled", true);
this.applyToAllCheckbox.set("title",this.nls.disableApplyAllExplaination);
}
style.set(this.nodeApplyAll, "display", "block");
this.loggerTabContainer.layout();
}
},
要回答这个问题，有两个比较重要的知识点需要牢牢把握：
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', useMenu: false,
useSlider: false, doLayout: false, 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>
下面是TitlePane.startup()方法调用时的堆栈，可以看出来GridX.resize()方法被调用。 _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) load(changeSize=undefined, ds= Object {})HLayout.js (line 71) (?)()_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=[], a1=undefined, 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)
下面是TitlePane.startup()方法调用时的堆栈，可以看出来TabContainer.resize()方法被调用。进而layout()方法会被调用。 layout()_TabCo...Base.js (line 114) resize(changeSize=undefined, resultSize=undefined)_LayoutWidget.js (line 142) inherited__debug(args=[], a1=undefined, a2=undefined)dojo.j...ssed.js (line 7256) resize()StackContainer.js (line 124) _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=[], a1=undefined, 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)
这就说明，使用table来做layout布局，是非常不可取的。原因就在于表布局本身有很多限制条件，导致使用div的widget在CSS布局和计算中不能根据window的状况得到 正确的结果。
一下是使用dojo的layout控件，重新写过的template html，实际上针对新的template html文件，js本身需要修改的地方很少。
<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",splitter:true, 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', useMenu: false,
useSlider: false, doLayout: false, 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", splitter:true, 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 parser widget templated html 里面data-dojo-type显示指定的dijit widget的列表。 //这段代码的意思即对所有data-dojo-type的widget调用startup()方法。 _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; } }); },
综上，dojo widget的启动遵循"深度优先”规则，即安装html代码片段，先启动显示申明的widget，接着启动container内部的子widget。 每个widget只启动一次，标志位_started可以用来检测是否startup过。