这个布局其实最为麻烦，主要是用来实现类似"上一步","下一步"类似向导的界面
代码如下:
<!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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../adapter/ext/ext-base.js"></script> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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>
效果图:
共同学习，写下你的评论
评论加载中...
作者其他优质文章
