将Dojo 1.3页面迁移到1.9：自定义BorderContainer不会显示在TabContainer中
我正在将一个非常复杂的Dojo 1.3页面迁移到Dojo 1.9.3。我正在努力解决的一个方面是：
<div id="desktopTabContainer" dojo13Type="dijit.layout.TabContainer" persist="true" class="desktopTabContainer" >
<s:iterator value="desktopViewList" var="rowValue">
<%-- A container representing each desktop tab. A desktop tab itself has no contents, it is only used to display the tab control itselfy.
The contents of the corresponding desktop are displayed in the 'desktopPane' content pane --%>
<div dojo13Type="dijit.layout.DesktopBorderContainer"
id="dijit_layout_BorderContainer_${rowValue.oid}"
desktopOid="${rowValue.oid}"
desktopVersion="${rowValue.version}"
title='
<span id="tabSpan${rowValue.oid}" title="<s:property value="%{escapeQuotes(description)}" />"><s:property value="%{escapeQuotes(name)}" /></span>
<span title="<s:text name="%{getText('label.desktop.editDesktop')}"/>" ondblclick="onEditDesktop()"><img src="<s:url value='/images/editDesktop.gif'/>" border="0" class="tabIcon" /></span>
'
closable="true" onClose="onRemoveDesktop(this)"></div>
</s:iterator>
<%-- A container representing the last 'New Desktop' tab which is displayed as a plus '+' button --%>
<div dojo13Type="dijit.layout.BorderContainer" id="addDesktopTab" title='<span id="addDesktopTabButton" title="<s:text name="%{getText('label.desktop.newDesktop')}"/>" ><img src="<s:url value='/images/addDesktop.gif'/>" border="0" /></span>' closable="false"></div>
</div>
在javascript中使用以下扩展和重新定义：
// ================================================
// The tab button component:
// ================================================
dojo13.extend(dijit13.layout._TabButton, {
onClick: function(e ) {
if( this.label.match("addDesktopTabButton") != null ) {
onNewDesktop();
}
}
});
// ================================================
// The Border Container and Stack Container components:
// ================================================
dojo13.provide("dijit.layout.DesktopBorderContainer");
dojo13.declare("dijit.layout.DesktopBorderContainer", dijit13.layout.BorderContainer,
{
desktopOid: null, desktopVersion: null,
resize: function(e) {
// fix for the tab container resizing when wrapping its tabs
tabContainer = dijit13.byId("desktopTabContainer");
if( tabContainer.domNode.style.height != tabContainer.tablist.domNode.clientHeight + 10 ) {
tabContainer.domNode.style.height = tabContainer.tablist.domNode.clientHeight + 10;
}
this.inherited(arguments);
}
});
dojo13.extend(dijit13.layout.StackController, {
onAddChild: function(/*Widget*/ page, /*Integer?*/ insertIndex){
// summary:
// Called whenever a page is added to the container.
// Create button corresponding to the page.
// tags:
// private
// add a node that will be promoted to the button widget
var refNode = dojo13.doc.createElement("span");
this.domNode.appendChild(refNode);
// create an instance of the button widget
var cls = dojo13.getObject(this.buttonWidget);
var button = new cls({label: page.title, closeButton: page.closable}, refNode);
this.addChild(button, insertIndex);
this.pane2button[page] = button;
page.controlButton = button; // this value might be overwritten if two tabs point to same container
var handles = [];
handles.push(dojo13.connect(button, "onClick", dojo13.hitch(this,"onButtonClick",page)));
if(page.closable){
handles.push(dojo13.connect(button, "onClickCloseButton", dojo13.hitch(this,"onCloseButtonClick",page)));
// add context menu onto title button
var tabMenu = new dijit13.Menu({targetNodeIds:[button.id], id:button.id+"_Menu"});
var mItemRemove = new dijit13.MenuItem({label:removeDesktopMessage, iconClass: "removeDesktopMenuItem", id: button.id+"_removeMenuItem"});
handles.push(dojo13.connect(mItemRemove, "onClick", dojo13.hitch(this, "onCloseButtonClick", page)));
tabMenu.addChild(mItemRemove);
var mItemEdit = new dijit13.MenuItem({label:editDesktopMessage, iconClass: "editDesktopMenuItem", id: button.id+"_editMenuItem"});
handles.push(dojo13.connect(mItemEdit, "onClick", dojo13.hitch(null, "onEditDesktop", page)));
tabMenu.addChild(mItemEdit);
var mItemNew = new dijit13.MenuItem({label:newDesktopMessage, iconClass: "newDesktopMenuItem", id: button.id+"_newMenuItem"});
handles.push(dojo13.connect(mItemNew, "onClick", "onNewDesktop"));
tabMenu.addChild(mItemNew);
dojo13.connect(tabMenu, "onOpen", dojo13.hitch(null,"checkTabMenuItemsState", button));
this.pane2menu[page] = tabMenu;
}
this.pane2handles[page] = handles;
if(!this._currentChild){ // put the first child into the tab order
button.focusNode.setAttribute("tabIndex", "0");
this._currentChild = page;
}
page.controlButton.closeIcon.title = removeDesktopMessage;
//make sure all tabs have the same length
if(!this.isLeftToRight() && dojo13.isIE && this._rectifyRtlTabList){
this._rectifyRtlTabList();
}
}
});
这会生成一个如下所示的标签系统：
我已按以下方式翻译：
（desktopNewDojo.jsp）
<%-- A container for the desktop tabs --%>
<div data-dojo-id="desktopTabContainer" id="desktopTabContainer" data-dojo-type="dijit/layout/TabContainer" class="desktopTabContainer" >
<s:iterator value="desktopViewList" var="rowValue">
<%-- A container representing each desktop tab. A desktop tab itself has no contents, it is only used to display the tab control itselfy.
The contents of the corresponding desktop are displayed in the 'desktopPane' content pane --%>
<div data-dojo-type="js/desktop/desktopBorderContainer" data-dojo-props="desktopOid:'${rowValue.oid}', desktopVersion:'${rowValue.version}', closable:false"
id="dijit_layout_BorderContainer_${rowValue.oid}"
title='
<span id="tabSpan${rowValue.oid}" title="<s:property value="%{escapeQuotes(description)}" />"><s:property value="%{escapeQuotes(name)}" /></span>
<span title="<s:text name="%{getText('label.desktop.editDesktop')}"/>" ondblclick="onEditDesktop()"><img src="<s:url value='/images/editDesktop.gif'/>" border="0" class="tabIcon" /></span>
'>
</div>
</s:iterator>
<%-- A container representing the last 'New Desktop' tab which is displayed as a plus '+' button --%>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="closable: false" id="addDesktopTab" title='<span id="addDesktopTabButton" title="<s:text name="%{getText('label.desktop.newDesktop')}"/>" ><img src="<s:url value='/images/addDesktop.gif'/>" border="0" /></span>'></div>
</div>
（JS /桌面/ desktopBorderContainer.js）
// ================================================
// The Border Container and Stack Container components:
// ================================================
define(["dojo/_base/declare", "dijit/layout/BorderContainer", "dijit/registry", "js/desktop/desktopCommons"], function(declare, BorderContainer, registry, desktopCommons) {
return declare("js.desktop.desktopBorderContainer", BorderContainer, {
desktopOid : null,
desktopVersion : null,
resize : function(e) {
// fix for the tab container resizing when wrapping its tabs
tabContainer = registry.byId("desktopTabContainer");
if (tabContainer.domNode.style.height != tabContainer.tablist.domNode.clientHeight + 10) {
tabContainer.domNode.style.height = tabContainer.tablist.domNode.clientHeight + 10;
}
this.inherited(arguments);
},
onClose : function(){
desktopCommons.onRemoveDesktop(this);
}
});
}）;
desktop.js：
// ================================================
// The tab button component:
// ================================================
lang.extend(TabController.TabButton, {
onClick : function(e) {
if (this.label.match("addDesktopTabButton") != null) {
desktopCommons.onNewDesktop();
}
}
});
lang
.extend(
StackController,
{
onAddChild : function(/* Widget */page, /* Integer? */
insertIndex) {
// summary:
// Called whenever a page is added to the
// container.
// Create button corresponding to the page.
// tags:
// private
// add a node that will be promoted to the
// button widget
var refNode = domConstruct.create("span");
this.domNode.appendChild(refNode);
// create an instance of the button widget
var cls = lang.getObject(this
.buttonWidget().declaredClass);
var button = new cls({
label : page.title,
closeButton : page.closable
}, refNode);
this.addChild(button, insertIndex);
this.pane2button[page] = button;
page.controlButton = button;
this.own(on(button, "click", lang.hitch(this,"onButtonClick",page)));
if(page.closable){
this.own(on(button, "clickCloseButton", lang.hitch(this,"onCloseButtonClick",page)));
// add context menu onto title button
var tabMenu = new Menu({targetNodeIds:[button.id], id:button.id+"_Menu"});
var mItemRemove = new MenuItem({label:removeDesktopMessage, iconClass: "removeDesktopMenuItem", id: button.id+"_removeMenuItem"});
this.own(on(mItemRemove, "click", lang.hitch(this, "onCloseButtonClick", page)));
tabMenu.addChild(mItemRemove);
var mItemEdit = new MenuItem({label:editDesktopMessage, iconClass: "editDesktopMenuItem", id: button.id+"_editMenuItem"});
this.own(on(mItemEdit, "click", lang.hitch(null, "onEditDesktop", page)));
tabMenu.addChild(mItemEdit);
var mItemNew = new MenuItem({label:newDesktopMessage, iconClass: "newDesktopMenuItem", id: button.id+"_newMenuItem"});
this.own(on(mItemNew, "click", "onNewDesktop"));
tabMenu.addChild(mItemNew);
on(tabMenu, "open", lang.hitch(null,"checkTabMenuItemsState", button));
this.own(tabMenu);
}
if (!this._currentChild) {// put the first
// child into
// the
// tab order
button.focusNode.setAttribute(
"tabIndex", "0");
this._currentChild = page;
}
page.controlButton.closeNode.title = removeDesktopMessage;
// make sure all tabs have the same length
if (!this.isLeftToRight() && has("ie")
&& this._rectifyRtlTabList) {
this._rectifyRtlTabList();
}
}
});
我面临的问题是，虽然我的页面没有抛出任何异常，但它也没有显示它应该显示的内容。我在dijit / layout / BorderContainer类的构造函数中放置了一个断点，但似乎根本没有调用它。我调试了这个，我认为我的DesktopBorderContainers的形成方式可能有问题，因为正如你在下面看到的那样，desktopOid和desktopVersion出现两次，一次为null，一次为正确值。
closable:false
containerNode:div#dijit_layout_BorderContainer_3.dijitBorderContainer.dijitContainer.dijitTabPane.dijitTabContainerTop-child.dijitTabContainerTop-dijitBorderContainer
desktopOid:"3"
desktopVersion:"1"
domNode:div#dijit_layout_BorderContainer_3.dijitBorderContainer.dijitContainer.dijitTabPane.dijitTabContainerTop-child.dijitTabContainerTop-dijitBorderContainer
id:"dijit_layout_BorderContainer_3"
ownerDocument:document
ownerDocumentBody:body.nihilo
params:Object
selected:true
srcNodeRef:div#dijit_layout_BorderContainer_3.dijitBorderContainer.dijitContainer.dijitTabPane.dijitTabContainerTop-child.dijitTabContainerTop-dijitBorderContainer
title:"↵ <span id="tabSpan3" title="">1</span>↵ <span title="Edit Desktop" ondblclick="onEditDesktop()"><img src="/alm/images/editDesktop.gif" border="0" class="tabIcon" /></span> ↵ "
_connects: Array(0)
_created:true
_inherited:Object
_supportingWidgets:Array(0)
_wrapper:div.dijitTabContainerTopChildWrapper.dijitHidden
__proto__: Object
constructor:function ()
declaredClass:"js.desktop.desktopBorderContainer"
desktopOid:null
desktopVersion:null
getInherited:function _2ef(name,args)
inherited:function _2e9(args,a,f)
isInstanceOf:function _2f2(cls)
onClose:function ()
resize:function (e)
__inherited:function _2e9(args,a,f)
__proto__:Object
我不确定为什么这些会出现两次，但我认为它可能与它没有显示的原因有关。
我还能做些什么来弄清楚为什么这些BorderContainers没有显示？
0 个答案:
没有答案
相关问题
- BorderContainer中的TabContainer无法正确显示
- Dojo 1.7：BorderContainer和ContentPanes无法在自定义小部件模板中工作
- TabContainer中的EnhancedGrid无法正常工作
- Dojo（Dijit）bordercontainer无法正确显示（以编程方式）
- Dojo：区域'top'中的TabContainer在BorderContainer中不可见
- 在嵌套的BorderContainer ContentPane小部件中未检测到Region属性
- titlepane中的Dojo tabcontainer在版本＆gt;中不起作用。 1.6
- 在dojo中使用TabContainer中的BorderContainer
- dijit嵌入式BorderContainer在模板内部不起作用
- 将Dojo 1.3页面迁移到1.9：自定义BorderContainer不会显示在TabContainer中
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？