ExtJs学习笔记(13)_Card布局

ExtJs学习笔记(13)_Card布局

这个布局其实最为麻烦，主要是用来实现类似"上一步","下一步"类似向导的界面

代码如下:

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> <! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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 > WindowLayOut </ 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-bodyp{}{
margin:10px;
font-size:12px;
}
</ style >
</ head >
< body >
< script type ="text/javascript" >

Ext.onReady(function(){

vari=0;

varnavHandler=function(direction){
if(direction==-1){
i--;
if(i<0){i=0;}
}

if(direction==1){
i++;
if(i>2){i=2;returnfalse;}
}


varbtnNext=Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
varbtnBack=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);

};


varcard=newExt.Panel({
width:200,
height:200,
title:'注册向导',
layout:'card',
activeItem:0,//makesuretheactiveitemissetonthecontainerconfig!
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>Step1of3</p>'
},{
id:'card-1',
html:'<h1>请填写注册资料!</h1><p>Step2of3</p>'
},{
id:'card-2',
html:'<h1>注册成功!</h1><p>Step3of3-Complete</p>'
}],

renderTo:"container"
});



});

</ script >

< div id ="container" style ="margin:100px" ></ div >

</ body >
</ html >

效果图:

欢迎加入:http://www.itpob.cn/bbs