这个布局其实最为麻烦,主要是用来实现类似"上一步","下一步"类似向导的界面
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Window LayOut</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style type="text/css">![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.x-panel-body p {
}{
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">![](https://www.cnblogs.com/Images/dot.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Ext.onReady(function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var i = 0;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var navHandler = function(direction)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (direction == -1)
{
i--;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (i < 0)
{ i = 0; }
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (direction == 1)
{
i++;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (i > 2)
{ i = 2; return false; }
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (i == 0)
{
btnBack.disabled = true;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
btnBack.disabled = false;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (i == 2)
{
btnNext.value = "完成";
btnNext.disabled = true;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
btnNext.value = "下一步";
btnNext.disabled = false;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
card.getLayout().setActiveItem(i);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
};
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var card = new Ext.Panel(
{
200,
height: 200,
title: '注册向导',
layout: 'card',
activeItem: 0, // make sure the active item is set on the container config!
bodyStyle: 'padding:15px',
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
defaults:
{
border: false
},
bbar: [
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
id: 'move-prev',
text: '上一步',
handler: navHandler.createDelegate(this, [-1])
},
'->',
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
id: 'move-next',
text: '下一步',
handler: navHandler.createDelegate(this, [1])
}
],
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
items: [
{
id: 'card-0',
html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
id: 'card-1',
html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
id: 'card-2',
html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
}],
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
renderTo: "container"
});
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
});
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
</script>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<div id="container" style="margin:100px"></div>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</body>
</html>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
效果图: