Dojo动态创建TabContainer

前端之家收集整理的这篇文章主要介绍了Dojo动态创建TabContainer前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
也许,这个标题起的不是很合适,因为我们这里讲述的不是创建TabContainer,再创建ContentPane,而我们重点讲述的是动态创建TabContainer下面的ContentPane。为了项目需要,我们需要在TabContainer下面动态添加ContentPane。也就是在TabContainer后面动态的添加Tab,以下是效果图,你懂的。


我们要在TabContainer下面创建ContentPane,首先当然需要一个已经存在的TabContainer。以下是HTML源码:

<div data-dojo-type="dijit.layout.TabContainer" data-dojo-attach-point="tabContainer">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title: "搜索条件"'>
<div class="searchConditionArea">
<label>ITCCXX FOR DEMO</label>
</div>
</div>
</div>

我们在tabContainer下面动态的创建Tab,如下代码

createAdvancedSearchTab : function (event){
var tab = ecmwdgt.getBean( "advancedSearchContentDijit" ,{
title: event.payload.item.label,
closable: true
});
this .tabContainer.addChild(tab);
this .tabContainer.selectChild(tab);
tab.loadSearchCondition();
}

也许读者不太理解 ecmwdgt.getBean( @H_301_164@"advancedSearchContentDijit")的作用。这里是在创建Tab时,在Tab的Content中加载 advancedSearchContentDijit 页面,而后面的 tab.loadSearchCondition()也是加载的 advancedSearchContentDijit 页的一个方法

由于 advancedSearchContentDijit 中的内容与动态创建 TabContainer 并不直接的关系,因此这里就不再介绍 advancedSearchContentDijit 中的内容,关于动态创建TabContainer的内容就结束了。
原文链接:https://www.f2er.com/dojo/291616.html

猜你在找的Dojo相关文章