大佬教程收集整理的这篇文章主要介绍了从一个失败的例子看dojo widget的定制，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
最近项目里使用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"); },
_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的生命周期，
@H_610_0@mypopup startup阶段：初始化左边的Data grid并startup (instance SELEct)，初始化右边的tabcontainer并startup， <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>
<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>
<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>
以上是大佬教程为你收集整理的从一个失败的例子看dojo widget的定制全部内容，希望文章能够帮你解决从一个失败的例子看dojo widget的定制所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。