EXTJS 实现TabPanel 并在各个Tab页中添加js写的panel

最新推荐文章于 2019-05-24 11:58:55 发布

苗苗IT记事本

最新推荐文章于 2019-05-24 11:58:55 发布

阅读量5.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签： extjs javascript

本文链接：https://blog.youkuaiyun.com/baidu_25969721/article/details/53535415

这篇博客介绍了如何在EXTJS中使用TabPanel来创建带有背景色的TAB页，并展示JavaScript编写的Panel内容。作者指出，关键在于设置TabPanel的`frame: true`属性以获得合适的视觉效果，并通过`items`属性加载js文件中的Panel实例。示例代码展示了如何创建并添加两个Tab，每个Tab分别包含不同的Panel实例。

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

初学EXTJS，要实现一个功能，实现两个TAB页切换的效果，并且点每个TAB页还能显示一个js文件中写好的panel，刚开始用panel 加tar的方式，发现这种方式还得写触发TAB切换的功能，好麻烦，本来EXTJS就有 Ext.TabPanel，用它可以，但是怎么也加不了内容，查了KPI才发现TabPanel有个参数很重要，就是frame:true, 这个参数添加后TAB页就加了背景颜色，不是一个HTML的形式了，如下图

如果不设置frame，默认是false，出现的效果图就是背景色是白的，好难看哦

另个在里边frame中添加JS文件的panel，还得用items, 一开始总以为用HTML，搞了半天也没成功，还得写一堆HTML代码，显示的还是代码内容。

好了，下边把代码贴一下吧。

var tabs = new Ext.TabPanel({
bodyStyle : 'margin-top:0px',
renderTo: Ext.getBody(),
activeTab: 0,
deferredRender: false,
tabPosition: 'top',
height : 180,
enableTabScroll: true,
items:[{title:'基本查询',
frame:true,
items : [basePanel],
},{title:'按系统查询',
frame:true,
items : [batchPanel]
}]

});

basePanel 就是new 出来的 js中的panel，或在当前js文件中定义一个panel。

var batchItems = new Ext.Panel({
layout : 'form',
height : 130,
style : 'margin:5 0 0 5',
items : [ {
layout : 'column',
items : [{
layout : 'form',
columnWidth : columnwidth,
defaults : {
anchor : anchor
},
labelWidth : labelwidth,
items : [ {} ]
}]
}]
});

var batchPanel = {
id : 'query_view',
autoScroll : true,
border : false,
hideBorders : true,
layout : 'column',
defaults : {
layout : 'form',
columnWidth : 1,
defaults : {
anchor : '-20'
}
},
items : [{
items :batchItems
}]
};