ExtJs学习笔记(13)_Card布局
ExtJs学习笔记(13)_Card布局<div class="postBody">这个布局其实最为麻烦，主要是用来实现类似"上一步","下一步"类似向导的界面
代码如下:
<div class="cnblogs_code"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->http://www.cnblogs.com/Images/OutliningIndicators/None.gif<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.cnblogs.com/Images/OutliningIndicators/None.gif
http://www.cnblogs.com/Images/OutliningIndicators/None.gif<htmlxmlns="http://www.w3.org/1999/xhtml">
http://www.cnblogs.com/Images/OutliningIndicators/None.gif<head>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif<title>WindowLayOut</title>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif<linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif<scripttype="text/javascript"src="../adapter/ext/ext-base.js"></script>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif<scripttype="text/javascript"src="../ext-all-debug.js"></script>
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif<styletype="text/css">http://www.cnblogs.com/Images/dot.gif
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif.x-panel-bodyp{http://www.cnblogs.com/Images/dot.gif}{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifmargin:10px;
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.giffont-size:12px;
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif</style>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif</head>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif<body>
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif<scripttype="text/javascript">http://www.cnblogs.com/Images/dot.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifExt.onReady(function()http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifvari=0;
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifvarnavHandler=function(direction)http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifif(direction==-1)http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifi--;
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifif(i<0)http://www.cnblogs.com/Images/dot.gif{i=0;}
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifif(direction==1)http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifi++;
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifif(i>2)http://www.cnblogs.com/Images/dot.gif{i=2;returnfalse;}
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifvarbtnNext=Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifvarbtnBack=Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifif(i==0)http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifbtnBack.disabled=true;
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifelsehttp://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifbtnBack.disabled=false;
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifif(i==2)http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifbtnNext.value="完成";
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifbtnNext.disabled=true;
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifelsehttp://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifbtnNext.value="下一步";
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifbtnNext.disabled=false;
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifcard.getLayout().setActiveItem(i);
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif};
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifvarcard=newExt.Panel(http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifwidth:200,
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifheight:200,
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.giftitle:'注册向导',
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.giflayout:'card',
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifactiveItem:0,//makesuretheactiveitemissetonthecontainerconfig!
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifbodyStyle:'padding:15px',
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifdefaults:http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifborder:false
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif},
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifbbar:[
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifhttp://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifid:'move-prev',
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.giftext:'上一步',
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifhandler:navHandler.createDelegate(this,[-1])
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif},
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif'->',
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifhttp://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifid:'move-next',
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.giftext:'下一步',
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifhandler:navHandler.createDelegate(this,[1])
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif],
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gifitems:[http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifid:'card-0',
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifhtml:'<h1>欢迎来到注册向导!</h1><p>Step1of3</p>'
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif},http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifid:'card-1',
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifhtml:'<h1>请填写注册资料!</h1><p>Step2of3</p>'
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif},http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifid:'card-2',
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifhtml:'<h1>注册成功!</h1><p>Step3of3-Complete</p>'
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif}],
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gifrenderTo:"container"
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif});
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif});
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif
http://www.cnblogs.com/Images/OutliningIndicators/None.gif</script>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif
http://www.cnblogs.com/Images/OutliningIndicators/None.gif<divid="container"style="margin:100px"></div>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif
http://www.cnblogs.com/Images/OutliningIndicators/None.gif</body>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif</html>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif
页:
[1]