这个布局其实最为麻烦，主要是用来实现类似"上一步","下一步"类似向导的界面
代码如下:
<!--<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">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>WindowLayOut</title>
<linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
<scripttype="text/javascript"src="../adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../ext-all-debug.js"></script>
<styletype="text/css">
.x-panel-bodyp{}{
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<scripttype="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>
<divid="container"style="margin:100px"></div>
</body>
</html>
效果图:
欢迎加入:http://www.itpob.cn/bbs
分享到：
相关推荐
ExtJs 教程与实例_学习笔记 1.什么是ExtJs 2....等等
6. **样式与布局**：由于两个框架都涉及用户界面，可能需要处理 ExtJS 样式与 Tapestry 默认样式之间的冲突，以确保视觉一致性。 通过这样的集成，开发者可以获得 ExtJS 提供的精美 UI 组件和 Tapestry 强大的后端...
在"EXT_ASP.rar_asp extjs_extjs_extjs asp_extjs+asp"这个压缩包中，我们可以看到EXTJS与ASP结合使用的示例，用于开发一个通讯录程序，这是一个很好的学习EXTJS和ASP集成的实践项目。 首先，EXTJS的核心在于它的...
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJS实现的用户管理界面,实现了用户的增加功能、修改功能、删除功能、查看工程。还提供了下拉列表选择框进行年龄的选择功能。
在描述中提到的"extjs4"指的是ExtJS的第4个主要版本，这个版本引入了许多改进和新特性，如新的布局系统、更好的性能和更多的UI组件。 **3. Oracle数据库** Oracle是全球知名的关系型数据库管理系统，广泛应用于大型...
标题中的"php-blog.rar_extjs_extjs php_extjs php bl_php blog"暗示这是一个与PHP和EXTJS相关的项目，可能是用于创建一个单用户的博客系统。EXTJS是一个强大的JavaScript库，用于构建富客户端应用，而PHP是一种广泛...
资源名称：获取ExtjS表格的值_ ExtJS_3.4 cellSelectModel资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
以上介绍的只是Extjs布局管理中的一小部分，Extjs官网提供了丰富的例子和详细的文档，这是学习Extjs布局的最佳资源。通过官网的例子，可以直观地看到不同布局类型的效果和配置方法，极大地便利了开发者的布局实践和...
总的来说，这个"ExtJS--Windows.rar"包是一个学习和实践使用ExtJS构建Windows风格前端应用的好资源，涵盖了从组件使用、布局设计到数据交互等多个方面。对于希望提升前端技能，尤其是想要将Web应用设计得更具桌面...
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是Ext.create(....)，而且可以使用动态加载JS的方式来加快组件的渲染，我们再也不必一次加载已经达到1MB的ext-all.js了，本文介绍如何在EXTJS4...
extjs_struts2_整合
EXTJS+PHP bs小型房屋管理系统
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
EXTJS in Action 是一本专为学习EXTJS编写的书籍，但这里我们主要关注学习笔记中的关键知识点。 首先，EXTJS的目录结构非常重要，因为它包含了所有必要的资源和源码： 1. `adapter`：这部分包含了适配器，用于将...
ExtJS是一个广泛使用的JavaScript库，...通过深入学习和理解这些内容，开发者能够熟练掌握ExtJS 3.3，编写出高效、高质量的Web应用。同时，文档中的示例代码也有助于开发者快速上手实践，将理论知识转化为实际技能。
extjs3.1中文API_chm版+书 下次再穿个可视化编辑器
适合ExtJs开发人员extjs技术上手以及深入
总之，"ExtJs_ASPMVC_Batch_Operation.rar"是一个综合性的示例，涵盖了Web开发中的多个重要技术，对于想要深入学习ExtJS与ASP.NET MVC集成的开发者来说，是一个宝贵的资源。通过实践这个项目，你可以了解到如何在...