card布局小实例

最新推荐文章于 2024-03-08 01:00:07 发布

rockethj8

最新推荐文章于 2024-03-08 01:00:07 发布

阅读量128

点赞数

分类专栏：技术类文章标签： EXT HTML

本文链接：https://blog.csdn.net/rockethj8/article/details/83777487

版权

技术类专栏收录该内容

36 篇文章 0 订阅

订阅专栏

Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求
<script type="text/javascript">
Ext.onReady(function(){
var p = new Ext.Panel({
renderTo:'hello',
title:'card',
width:300,
height:120,
layout:'card',
activeItem:0,
layoutConfig:{animate:true},
items:[{title:'one',html:'one is ok'},{title:'two',html:'two is ok'},{title:'three',html:'three is ok'}],
buttons:[{text:'change',handler:changeTab}]
});
var i = 1;
function changeTab(){
p.getLayout().setActiveItem(i++);
if(i>2){
i=0;
}
}
});
</script>
</head>

<body>

<div id="hello"></div>
</body>
</html>