这个布局其实最为麻烦，主要是用来实现类似"上一步","下一步"类似向导的界面
代码如下:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
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
>
<
style
type
="text/css"
>
.x-panel-body p {
margin:10px;
font-size:12px;
}
</
style
>
</
head
>
<
body
>
<
script
type
="text/javascript"
>
Ext.onReady(function() {
var i = 0;
var navHandler = function(direction) {
if (direction == -1) {
i--;
if (i < 0) { i = 0; }
}
if (direction == 1) {
i++;
if (i > 2) { i = 2; return false; }
}
var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
if (i == 0) {
btnBack.disabled = true;
}
else {
btnBack.disabled = false;
}
if (i == 2) {
btnNext.value = "完成";
btnNext.disabled = true;
}
else {
btnNext.value = "下一步";
btnNext.disabled = false;
}
card.getLayout().setActiveItem(i);
};
var card = new Ext.Panel({
width: 200,
height: 200,
title: '注册向导',
layout: 'card',
activeItem: 0, // make sure the active item is set on the container config!
bodyStyle: 'padding:15px',
defaults: {
border: false
},
bbar: [
{
id: 'move-prev',
text: '上一步',
handler: navHandler.createDelegate(this, [-1])
},
'->',
{
id: 'move-next',
text: '下一步',
handler: navHandler.createDelegate(this, [1])
}
],
items: [{
id: 'card-0',
html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
}, {
id: 'card-1',
html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
}, {
id: 'card-2',
html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: "container"
});
});
</
script
>
<
div
id
="container"
style
="margin:100px"
></
div
>
</
body
>
</
html
>
效果图:
代码如下:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
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
>
<
style
type
="text/css"
>
.x-panel-body p { margin:10px; font-size:12px; }
</
style
>
</
head
>
<
body
>
<
script
type
="text/javascript"
>
Ext.onReady(function() { var i = 0; var navHandler = function(direction) { if (direction == -1) { i--; if (i < 0) { i = 0; } } if (direction == 1) { i++; if (i > 2) { i = 2; return false; } } var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1]; var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0]; if (i == 0) { btnBack.disabled = true; } else { btnBack.disabled = false; } if (i == 2) { btnNext.value = "完成"; btnNext.disabled = true; } else { btnNext.value = "下一步"; btnNext.disabled = false; } card.getLayout().setActiveItem(i); }; var card = new Ext.Panel({ width: 200, height: 200, title: '注册向导', layout: 'card', activeItem: 0, // make sure the active item is set on the container config! bodyStyle: 'padding:15px', defaults: { border: false }, bbar: [ { id: 'move-prev', text: '上一步', handler: navHandler.createDelegate(this, [-1]) }, '->', { id: 'move-next', text: '下一步', handler: navHandler.createDelegate(this, [1]) } ], items: [{ id: 'card-0', html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>' }, { id: 'card-1', html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>' }, { id: 'card-2', html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'}], renderTo: "container" }); });
</
script
>
<
div
id
="container"
style
="margin:100px"
></
div
>
</
body
>
</
html
>
效果图:
