Ext.TabPanel选项卡初始化后添加Ext.grid.gridPanel组件

想写一个布局的页面,其中用到了tabpanel,想在选项卡中添加一个gridpanel表格,但不想在tabpanel初始化的时候写在items里面。

因为初学,并不知该如何实现,上网找了找也没找到相关的例子。没办法,只好去查api文档。不过在tabpanel中没有相关的。想到

选项卡其实也是panel,就去panel里面看了看,看到了add方法。试了试不管用,很疑惑,后来仔细一看发现,调用add方法后要调用

一下dolayout方法。原话是“you may need to call doLayout to refreshthe view”。试了下,very good,搞定了,:-)

        content.getItem('tab1').add(grid);//content是tabpanel的对象,tab1是选项卡的id,这句就是将grid添加到选项卡里面
        content.doLayout();//刷新显示

效果:


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tabpanel选项卡的切换与隐藏可以通过以下步骤实现: 1. 在HTML中,使用`<ul>`和`<li>`标签创建选项卡的导航栏,并使用`<div>`标签创建选项卡内容的容器。 2. 给每个选项卡内容的容器设置一个唯一的`id`属性,并将其与对应的选项卡导航链接的`href`属性相对应。 3. 使用CSS样式隐藏所有的选项卡内容容器,只显示默认选项卡的内容。 4. 使用JavaScript代码监听选项卡导航链接的点击事件,并在事件处理程序中切换选项卡内容的可见性。 以下是一个简单的示例代码: HTML代码: ``` <ul> <li><a href="#tab1">选项卡1</a></li> <li><a href="#tab2">选项卡2</a></li> <li><a href="#tab3">选项卡3</a></li> </ul> <div id="tab1">选项卡1的内容</div> <div id="tab2">选项卡2的内容</div> <div id="tab3">选项卡3的内容</div> ``` CSS代码: ``` div { display: none; } div:first-child { display: block; } ``` JavaScript代码: ``` var tabs = document.querySelectorAll('ul li a'); for (var i = 0; i < tabs.length; i++) { tabs[i].addEventListener('click', function(event) { event.preventDefault(); var target = event.target.getAttribute('href'); var tabContent = document.querySelector(target); var activeTab = document.querySelector('ul li a.active'); var activeContent = document.querySelector('div.active'); activeTab.classList.remove('active'); activeContent.classList.remove('active'); event.target.classList.add('active'); tabContent.classList.add('active'); }); } ``` 在上面的示例中,我们使用CSS样式将所有的选项卡内容容器隐藏起来,只显示第一个选项卡的内容。然后,使用JavaScript代码监听选项卡导航链接的点击事件,并在事件处理程序中切换选项卡内容的可见性。在切换选项卡时,我们先将当前活动的选项卡和对应的内容容器的`active`类移除,然后将新选中的选项卡和对应的内容容器添加`active`类,以显示它们。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值