ext.tab.panel使用remove()方法,关掉一个选项卡后,再创建一个新的选项卡,显示一片空白。

maojunm 2013-07-17 06:22:30
var MainPanel = Ext.create('Ext.tab.Panel', {
id: 'mainPanel',
region: 'center',
width: '84%',
autoScroll: true,
deferredRender:false,
bodyStyle: "background-color:#dfe8f6; border-width: 0px 0px 0px 0px;background:transparent",
items: {
// contentEl: 'init',
id:'init',
title: 'Welcome',
autoScroll: true
} });


listeners:{       
itemclick: function(view, record, item, index, e, eOpts) {
var tab = MainPanel.getActiveTab().getItemId();//得到当前活动的选项卡id
//创建数据源
alert("activeTabId="+tab);
//动态创建的选项卡id为树结点id,初始选项卡id为init,点击树结点,判断当前活动的选项卡id是否为点击的这个树结点id,不是的话MainPanel就添加一个新的选项卡。
if(tab != record.data.id || tab == 'init'){
var currentTab = MainPanel.getActiveTab();
MainPanel.remove(currentTab,true);
MainPanel.add({
id:record.data.id,
title:record.data.text,
deferredRender:false,
//autoTabs: true,
xtype: 'panel',//xtype可以让一个容器的子组件事先定义好,到真正需要的时候再初始化。
//closable : true, //closable表示该面板可以关闭
layout : 'fit',
height: '100%',
autoLoad :{
url : record.data.url, // 这里是存的一个action
params:{"tabId":record.data.id},
scripts: true // 加载的页面中js可运行
}
}).show();
MainPanel.setActiveTab(record.data.id);
MainPanel.doLayout(true);
}else {
alert("else");
Ext.getCmp(record.data.id).setActiveTab(tab);
}

},
scope : this
}


如上代码,我第一次点击一个树结点时,当前活动选项卡是init,能将init选项卡remove()掉,并创建一个id为树结点的新的选项卡并能显示。但第二次点击另一个树结点时,选项卡区域显示一片空白。我调试得出结果:id为第一个树结点的选项卡remove()掉了,当前活动的选项卡id是第二个树结点id,但没有显示。
ext.tab.panel的remove()方法是把指定id的选项卡关掉,还是将它从panel中删除了呢?
...全文
125 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
1 课程目标 学会使用腾讯提供的云开发功能快速开发后台 数据接口,用于存储小程序中用到的数据 学会使用小程序中常见的一些API,比如:分享小程序,拨打手机电话,地图位置等 掌握快速上架一款小程序需要的步骤 前端相关的css以及html,vue等基础不作为本课程的重点,本课程将提供一个基于图鸟UI修改的企业产品展示前端代码,我们在此基础上使用云开发实现页面数据动态化。由于本人是后端开发,对于前端样式等不擅长,所以基本都是直接复制现成的样式做简单的修改,想要学习前端html,css,js,vue等基础知识的小伙伴可以不必考虑本课程,B站以及其他平台有大量的免费课程。 2 课程内容 本课程将实现一个完整功能的企业产品展示小程序,之前有人找我开发一个农用拖拉机企业展示的小程序,说是要用云开发来做,正好我之前没用过云开发,都是自己搭建后端API以及管理后台来开发,因此想着一边开发一边录一个云开发的课程,帮助一些同学快速入门云开发,将包括一下内容: 首页 主要产品推荐 顶部铲平轮播图展示 中间产品分类 轮播消息通知 产品价格咨询 用户留下联系方式 全部产品列表展示 产品详细信息展示 用户估价咨询表单,用户向企业出售产品,类似厂家回收 个人中心 注册登录 询价记录 拨打企业电话 查看企业地址 查看企业工作时间 3 使用技术 vue2 uniapp 图鸟UI javascript 腾讯云开发 4 需要的开发工具 图鸟原始模板:https://ext.dcloud.net.cn/plugin?id=14378 hbuilder开发工具: https://www.dcloud.io/hbuilderx.html 微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

50,528

社区成员

发帖
与我相关
我的任务
社区描述
Java相关技术讨论
javaspring bootspring cloud 技术论坛(原bbs)
社区管理员
  • Java相关社区
  • 小虚竹
  • 谙忆
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧