extjs tabPanel window

最新推荐文章于 2018-11-10 15:55:38 发布

原创最新推荐文章于 2018-11-10 15:55:38 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tabpanel #extjs

extjs 例子专栏收录该内容

8 篇文章

订阅专栏

本文展示了一个使用ExtJS框架创建的TabPanel组件示例。该示例中包含了多个面板，每个面板都设有独特的标题和背景图片，并且内含按钮元素。通过此示例可以了解如何在网页应用中实现标签页的功能。

Ext.onReady(function (){
var tabPanel = new Ext.TabPanel({
//title:'yang chun zhi',
width:500,
height:300,
enableTabScroll:true,
closable:true,
draggable:true,
renderTo:'mainDiv',
bodyStyle:"background-image:url('tree/images/image001.gif')",
items:[new Ext.Panel({
title:'独一无二',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
ctCls :'tabIcon',
height:200,
html:'<input type="button" value="独一无二"/>'
}),new Ext.Panel({
title:'流年往事',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="流年往事"/>'
}),new Ext.Panel({
title:'至尊无上',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="至尊无上"/>'
}),new Ext.Panel({
title:'沉鱼落雁',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="沉鱼落雁"/>'
}),new Ext.Panel({
title:'黑色名单',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="黑色名单"/>'
}),new Ext.Panel({
title:'单身神话',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="单身神话"/>'
}),new Ext.Panel({
title:'幽灵禁区',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="幽灵禁区"/>'
}),new Ext.Panel({
title:'游戏世界',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="游戏世界"/>'
}),new Ext.Panel({
title:'葵花宝典',
bodyStyle:"background-image:url('tree/images/image001.jpg')",
html:'<input type="button" value="葵花宝典"/>'
})]
});

var window = new Ext.Window({
title:'春峰科技',
width:513,
height:300,
enableTabScroll:true,
closable:true,
draggable:true,
renderTo:Ext.getBody(),
items:[tabPanel]
});

window.show();
});