Dojo动态创建TabContainer

本文介绍了如何在已有的TabContainer组件中动态添加新的ContentPane标签页。通过使用Dojo框架的功能,可以在运行时根据需要创建并添加新的标签页及其内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

     也许,这个标题起的不是很合适,因为我们这里讲述的不是创建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("advancedSearchContentDijit")的作用。这里是在创建Tab时,在Tab的Content中加载advancedSearchContentDijit页面,而后面的tab.loadSearchCondition()也是加载的advancedSearchContentDijit页的一个方法。

     由于advancedSearchContentDijit中的内容与动态创建TabContainer并不直接的关系,因此这里就不再介绍advancedSearchContentDijit中的内容,关于动态创建TabContainer的内容就结束了。



评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值