ExtJs学习笔记(13)_Card布局

最新推荐文章于 2025-08-15 22:56:20 发布
转载 最新推荐文章于 2025-08-15 22:56:20 发布 · 60 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yjmyzz/archive/2008/09/02/1281869.html
文章标签：

#xhtml #javascript #ViewUI

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

代码如下:
<!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" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
ExpandedBlockStart.gifContractedBlock.gif    <style type="text/css">
ExpandedSubBlockStart.gifContractedSubBlock.gif    .x-panel-body p {}{
        margin:10px;
        font-size:12px;
    }
    </style>
</head>
<body>
ExpandedBlockStart.gifContractedBlock.gif<script type="text/javascript">

ExpandedSubBlockStart.gifContractedSubBlock.gif    Ext.onReady(function() {

        var i = 0;

ExpandedSubBlockStart.gifContractedSubBlock.gif        var navHandler = function(direction) {
ExpandedSubBlockStart.gifContractedSubBlock.gif            if (direction == -1) {
                i--;
ExpandedSubBlockStart.gifContractedSubBlock.gif                if (i < 0) { i = 0; }
            }

ExpandedSubBlockStart.gifContractedSubBlock.gif            if (direction == 1) {
                i++;
ExpandedSubBlockStart.gifContractedSubBlock.gif                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];

ExpandedSubBlockStart.gifContractedSubBlock.gif            if (i == 0) {
                btnBack.disabled = true;
            }
ExpandedSubBlockStart.gifContractedSubBlock.gif            else {
                btnBack.disabled = false;
            }

ExpandedSubBlockStart.gifContractedSubBlock.gif            if (i == 2) {
                btnNext.value = "完成";
                btnNext.disabled = true;
            }
ExpandedSubBlockStart.gifContractedSubBlock.gif            else {
                btnNext.value = "下一步";
                btnNext.disabled = false;
            }

            card.getLayout().setActiveItem(i);

        };


ExpandedSubBlockStart.gifContractedSubBlock.gif        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',
ExpandedSubBlockStart.gifContractedSubBlock.gif            defaults: {
                border: false
            },
            bbar: [
ExpandedSubBlockStart.gifContractedSubBlock.gif                {
                    id: 'move-prev',
                    text: '上一步',
                    handler: navHandler.createDelegate(this, [-1])                    
                },
                '->',
ExpandedSubBlockStart.gifContractedSubBlock.gif                {
                    id: 'move-next',
                    text: '下一步',
                    handler: navHandler.createDelegate(this, [1])
                }
            ],

ExpandedSubBlockStart.gifContractedSubBlock.gif            items: [{
                id: 'card-0',
                html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
ExpandedSubBlockStart.gifContractedSubBlock.gif            }, {
                id: 'card-1',
                html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
ExpandedSubBlockStart.gifContractedSubBlock.gif            }, {
                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>

效果图:


转载于:https://www.cnblogs.com/yjmyzz/archive/2008/09/02/1281869.html

Extjs学习笔记之七 布局
01-19
1. AbsoluteLayout 可以通过Panel内部组件的决定位置来布局。通过x,y来指定。 示例用法： 代码如下: new Ext.Panel({ layout: ‘absolute’, title: ‘AbsuluteLayout’, renderTo: document.body, frame: true, ...
extjs_tapestry.rar_extjs tapestry_extjs_tapestry_tapestry
09-22
6. **样式与布局**：由于两个框架都涉及用户界面，可能需要处理 ExtJS 样式与 Tapestry 默认样式之间的冲突，以确保视觉一致性。 通过这样的集成，开发者可以获得 ExtJS 提供的精美 UI 组件和 Tapestry 强大的后端...
EXTJS学习笔记
Guojun的博客
04-08 263
sencha which set PATH=%PATH%;C:\Sencha\Cmd\6.0.0.92 sencha generate app --ext MyApp ./myapp 将会创建名为 MyApp 的 Ext JS 应用，应用所有的文件都放在 当前目录下名为 myapp 的文件夹。 extjs 1.基本结构: Ext.define(‘Car’,{ name:null, construc...
extjs Viewport笔记
xiejunna的博客
04-19 645
Viewport可视应用程序区域（浏览器视区）的专用容器。 Viewport将自身呈现到文档主体，并自动将自身调整为浏览器可视区的大小，并管理窗口大小调整。一个页面中只能创建一个Viewport。 与任何ext.container.container一样，如果使用布局配置，则Viewport将只对其子组件执行大小调整和定位。 与Viewport一起使用的常见布局是ext.layout.contai...
ExtJS学习笔记(九) Layout
左手121
01-17 414
Ext.onReady(function () { accordion(); absolute(); border(); card(); column(); fit(); hbox(); vbox(); table(); });// 此布局将多个Panel以一种可以展开/收缩的样式排列, 且任何时候只有一个Panel可以处于展开
extjs 学习笔记（二）
anwenzhao0749的博客
09-28 405
EXTJS实用开发指南 1、 要使用ExtJS 框架的页面中一般包括下面几句： <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base...
【extjs6学习笔记】1.5 初始：关于布局
weixin_34033624的博客
05-25 115
absolute 绝对布局，这个布局使用 x 和 y 属性来指定组件的绝对定位 accordion 手风琴布局【可折叠布局】这个布局展示了在一个时间里只有一个内置的可支持折叠和展开的子级 panel border border布局，最多可以将页面分割为"东南西北中"五部分，是最常用的一种布局方式。我们可以根据项...
ExtJs4 笔记（14） layout 布局
evilcry2012的专栏
03-07 385
ExtJs4 笔记（14） layout 布局 《回到系列目录 本篇讲解Ext另一个重要的概念：布局。一般的容器类控件都是通过配置项items添加子控件的，这些子控件相对于父控件怎么定位呢，这里就要用到布局。某些容器类控件，它本身默认就集成了一种布局方式，例如比较典型的是：Ext.container.Viewport 布局控件，它其实就是一个border布局的容器，还有Ext.
extjs_simple.rar_extjs_extjs simple_extjs_simple
09-14
ExtJS实现的用户管理界面,实现了用户的增加功能、修改功能、删除功能、查看工程。还提供了下拉列表选择框进行年龄的选择功能。
ssh_extjs.rar_extjs_extjs ssh_oracle
09-23
在描述中提到的"extjs4"指的是ExtJS的第4个主要版本，这个版本引入了许多改进和新特性，如新的布局系统、更好的性能和更多的UI组件。 **3. Oracle数据库** Oracle是全球知名的关系型数据库管理系统，广泛应用于大型...
EXT_ASP.rar_asp extjs_extjs_extjs asp_extjs+asp
09-14
在"EXT_ASP.rar_asp extjs_extjs_extjs asp_extjs+asp"这个压缩包中，我们可以看到EXTJS与ASP结合使用的示例，用于开发一个通讯录程序，这是一个很好的学习EXTJS和ASP集成的实践项目。 首先，EXTJS的核心在于它的...
11. HTML 中 DOCTYPE 的作用
weixin_64684095的博客
07-22 581
H5 的声明HTML5 的 DOCTYPE 声明HTML5 中的声明用于告诉浏览器当前文档使用的是 HTML5 的文档类型。它必须是文档中的第一行内容（在任何 HTML 标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE 的作用触发标准模式DOCTYPE声明的主要作用是让浏览器以标准模式（Standards Mode）来解析和渲染页面，而不是以兼容模式（Quirks Mode）。兼容性：在没有DOCTYPE声明的情况下，浏览器可能会进入兼容模式，这会导致页面的布局和样式表现不一致。
Go语言实战案例:静态资源服务（CSS、JS、图片）
tenkofx的博客
08-15 652
• Gin 提供Static()方法一行就能完成静态文件托管。• 静态文件路径映射和 URL 前缀可以灵活配置。• 结合 HTML 模板，可以很方便地构建完整的前端页面服务。
20道Vue框架相关前端面试题及答案
qq_39540458的博客
08-14 1144
Vue是一个渐进式JavaScript框架，具有响应式数据绑定、组件化开发等核心特性。面试常见问题包括：双向数据绑定原理（Vue2使用Object.defineProperty，Vue3改用Proxy）、生命周期钩子（如created、mounted）、组件通信方式（props/emit、provide/inject等）、计算属性与监听器的区别、v-if与v-show的适用场景等。Vuex用于状态管理，包含state、mutations等核心概念；Vue Router支持hash和history两种路由模式
JavaScript 核心基础：类型检测、DOM 操作与事件处理
最新发布
热爱音乐和二次元！
08-15 1289
本文系统梳理 JavaScript 核心知识点，包括数据类型检测规则、遍历方式、DOM操作和事件处理。重点解析 typeof 运算符对不同数据类型的检测结果，数组与对象的遍历方法差异，以及使用 querySelector 获取元素的现代方案。同时详细讲解事件绑定的两种方式（onclick 覆盖 vs addEventListener 多播）和事件冒泡机制，帮助开发者构建扎实的 JS 基础，写出更健壮的代码。
VUE3 学习笔记2 computed、watch、生命周期、hooks、其他组合式API
mashirokayo的博客
08-15 1295
在vue3中，虽然也能写vue2的computed，但还是更推荐使用vue3语法的computed。computed是一个函数。它的参数接收一个函数，这个函数可以是普通函数，也可以是箭头函数，由于vue3中没有this，所以无需关注函数类型对this指向的影响。这个函数就是计算的方法函数。但是通过这种方式定义的计算属性，是只读的，无法对属性进行修改。如果计算属性同时需要读取和修改，要通过下面这种形式：传入computed的参数是一个对象，在对象中配置get和set。
ExtJs学习笔记：优缺点与深入探索
本资源是一份详细的ExtJs学习笔记文档，包含了多个章节内容，涵盖了ExtJs的基础结构、组件、数据管理以及Ajax相关技术。首先，学习者会从ExtJs的结构树开始，理解其组织架构，包括Ext.form组件的概述，这是前端表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值