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