froghui

从一个失败的例子看dojo widget的定制

最近项目里使用dojo做界面，设想的界面大概是这个样子。

从整个界面layout来看，使用table来做是一个简单有效地方式：

 
      

              ${uiParams.traceDescription}

                    
                 
                             
                    

                    
                      
                          
                      
                       
                      

                          
                              
                              

                                                                                          
                              
                          
                          
                              ${uiParams.applyToAllInfo}

这里右边的table里有两个重要的对像，其一是一个TabContainer用来显示真正的数据，id为loggerTabContainer; 另一个是没有数据时用来显示的GridX, 其id为nondataDisplay。

这里在buildRendering里面初始化左边的grid和nodatadisplay grid，并且发送rest request到server端请求数据，注册callback处理右边界面的显示。在server数据没有fetch完成之前，显示nodatadisplay。

			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代码片段里面设置的。

.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的块级元素，行内元素和表元素。

我们知道，

是块级元素,是行内元素，是表元素。每种元素在界面上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时，宽度就可以正确的根据此时的宽度计算得出。

不能正确显示宽度的代码：

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()方法，不幸的是，此时元素的宽度已经被之前GridX的宽度限制在了50000，所以此刻即使TabContiner resize()方法被调用，也没有办法重新根据window布局计算真正的width.

注意这里即使调整nodatadisplay 和loggerTabContainer的前后顺序也是无济于事，因为这两个widget的html代码片段完成以后，整个mypopup dom节点放到html page时，这个元素的宽度已经是50000。这是因为表元素的性质决定的。

一个简单的html例子可以展示这一点：







	this is first div



	this is second div









	this is first div



	this is second div

下面是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)