`
liss
  • 浏览: 844195 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

EXT card布局

阅读更多
Ext.onReady(function(){
 
////////////////////////////////////////翻页方法start//////////////////////////////////////////////////

var changeTab = function changeTab(){
   var id = card.getLayout().activeItem.id;
   var prev = Ext.getCmp('move-prev');
   var next = Ext.getCmp('move-next');
   var exit = Ext.getCmp('exit');
//alert(id);
   if(id=='card-0'){
      prev.setDisabled(false);
    next.setDisabled(false);
    card.getLayout().setActiveItem(1);
   }
   else if(id=='card-1'){
    var name = panel2.findById('name').getValue();
             if(name==null||name==''){
              Ext.Msg.alert('系统提示','请填写用户名');
             }else{
     prev.setDisabled(true);
     next.setText('确定');
     exit.setDisabled(true);
     card.getLayout().setActiveItem(2);
    }
   }
   else if(id=='card-2'){    
    Ext.Msg.alert('注册成功','你的用户名:'+panel2.findById('name').getValue());
   }
}

var backTab = function backTab(){
   var id = card.getLayout().activeItem.id;
   var prev = Ext.getCmp('move-prev');
   var next = Ext.getCmp('move-next');
   
   if(id=='card-0'){
    prev.setDisabled(true);
    next.setDisabled(false);    
   }
   if(id=='card-1'){
    prev.setDisabled(true);
    next.setDisabled(false);
    card.getLayout().setActiveItem(0);    
   }
}

////////////////////////////////////////翻页方法end//////////////////////////////////////////////////
 
var panel1 = new Ext.Panel({
  id: 'card-0',
  frame:true,
  height:300,
    width:500,
    html:'<span style="color:red">第1步:注册协议(共3步)'
 });
var panel2 = new Ext.form.FormPanel({
  id: 'card-1',
  height:300,
    width:500,
    frame:true,
    bodyStyle: 'padding:15px,0px,0px,100px',
    layout:'form',
    labelAlign:'right',
    defaultType :'textfield',
    items:[
     {      
      xtype:'label',
      labelWidth:100,
      html:'<center>请输入注册信息</center><br>'
     },{
      id:'name',
      fieldLabel:'用户名',
      labelWidth:100
     },{
      fieldLabel:'密码',
      inputType:'password',
      labelWidth:100
     },{
      fieldLabel:'确认密码',
      inputType:'password',
      labelWidth:100
     },{
      fieldLabel:'邮箱',
      vtype:'email',
      labelWidth:100
     }
    ]
 });
var panel3 = new Ext.Panel({
  id: 'card-2',
  frame:true,
  height:300,
    width:500,
    html:'<span style="color:red">第3步:注册成功(共3步)'
 });
var card = new Ext.Window({
  resizable:false,
  id:'wizard',
    title: '注册',
    layout:'card',
    height:300,
    width:500,
    activeItem: 0, 
    defaults: {
        border:false
    },
    bbar: ['->',
        {
            id: 'move-prev',
            text: '上一步',
            disabled: true,
            handler:backTab
          
        },       
        {
            id: 'move-next',
            text: '下一步',
            handler:changeTab             
        },       
        {
            id: 'exit',
            text: '取消',
            handler:function(){Ext.Msg.alert('系统提示','退出')}
        }
    ],
    items: [panel1,panel2,panel3]
});

card.show();
})

 

分享到:
评论

相关推荐

    Ext介绍以及_ext页面布局

    3. **Card布局**:Card布局在一个容器中只显示一个子元素,常用于实现轮播效果或选项卡面板。 4. **Border布局**:Border布局是最常用的布局之一,它将容器分为五个区域:东(east)、南(south)、西(west)、北(north)...

    EXT 布局 Layout 资料

    - **Card 布局**:常用于 TabPanel,只显示当前选中的子元素。 - **Table 布局**:用于表格布局,支持行列布局。 每种布局都有其特定的应用场景,选择合适的布局可以帮助开发者更好地组织界面元素,提高用户界面的...

    ext布局(Layout.html)例子.pdf

    Card布局类似于翻页或步骤向导,一次仅显示一个子组件。`activeItem`属性指定当前可见的子组件索引。常用于步骤引导或选项卡面板。 7. Table布局: Table布局将子组件按表格形式排列,通过`layout: 'table'`和`...

    Ext10种布局

    - **定义**:通过 `Ext.layout.CardLayout` 类定义,布局名称为 `card`。 - **应用场景**:实现在容器中只显示一个子元素的功能,适用于实现安装向导或 Tab 选项卡等功能。 - **操作方法**:使用 `setActiveItem` ...

    ext布局layout各组件动态生成并相互交互

    发现目前网上 ext layout 例子虽然各项功能可以实现但是无法应用到真实项目中 因为大部分例子其中的各组件是静态写成的 只是动态的通过对象名调用 实际开发中各组件多为动态生成 因为即时数据:不能定义对象名...

    ext布局(Layout.html)例子[参考].pdf

    6. **Card布局**:同一时间仅显示一个子组件,通常用于向导或选项卡面板。使用`layout: "card"`,并使用`activeItem`属性指定当前显示的卡片索引。 7. **Table布局**:类似HTML表格,将子组件按行和列排列。通过`...

    搜集来的ext布局材料

    - `card` 布局:用于在一组卡片中切换显示一个组件,常用于tabpanel。 - `table` 布局:未在代码中出现,用于表格样式的布局,组件按行和列分布。 4. **工具栏(tbar/bbar)**: - `tbar`(top toolbar)和 `...

    Ext教程ext2-Ext简易教程

    4. Card布局:只显示一个子组件,常用于实现多步骤向导或选项卡式界面。 例如,要使用Border布局,你可以创建一个包含多个区域的容器: ```javascript var container = new Ext.container.Viewport({ layout: '...

    ext实例 ext操作步骤

    4. **Card布局**:由`Ext.layout.CardLayout`定义,只在特定时间显示一个子组件,常用于步骤向导或选项卡式界面。 **创建窗口**在EXT中,窗口通常用于弹出式对话框或者独立的功能区。EXT提供了`Ext.Window`类来创建...

    ext的课件,ppt版,适合有面向对象基础人士

    4. Card布局:由`Ext.layout.CardLayout`定义,只在特定时刻显示一个子组件,常用于实现步骤向导或Tab面板,其中每个子组件代表一个独立的“卡片”。 掌握这些布局方式,开发者可以创建出复杂多样的界面结构,以...

    Ext JS 4 Architecture

    Ext JS 4提供了多种布局管理器,如盒式布局(box layout)、表格布局(table layout)、卡片布局(card layout)等,这些布局可以帮助开发者按照预期的视觉结构安排和管理组件。 6. **数据管理(Data)** 数据的...

    EXTJS4自学手册

    EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册——EXT组件布局 四、Extjs页面控件 EXTJS4自学手册——页面控件(表格) EXTJS4自学手册——页面控件(表格的特性属性) EXTJS4自学手册——页面...

    Ext3.0最经典的学习教程.pdf

    - **卡片布局 (Card Layout)**: 适合在一个容器中切换不同的内容页面。 - **表格布局 (Table Layout)**: 用于展示数据表格时的布局。 - **流式布局 (Fit Layout)**: 自动填充容器的宽度和高度。 - **绝对定位布局 ...

    Ext教程.pptExt教程.pptExt教程.ppt

    4. **Card布局**:基于`Ext.layout.CardLayout`,在一个时间内只显示一个子元素,适合于创建步骤向导或者Tab面板,其中只有一个面板处于活跃状态。 除了这些基本布局,Ext还提供了许多其他高级控件,如窗口...

    ext js中文开发手册

    EXT JS提供了多种布局管理器,如Card、Border、Fit等,用于控制组件的排列和大小调整。布局是创建响应式和适应不同屏幕尺寸界面的关键。 **十一、Grid组件** Grid组件是EXT JS中用于展示大量表格数据的核心组件。...

    EXT开发文档

    - **EXT** 提供了多种布局方式,如卡片布局(Card Layout)、边界布局(Border Layout)等。 - 通过布局可以方便地管理和调整界面元素的位置和大小。 7. **表格组件**: - **Grid** 组件是 **EXT** 中非常重要的一...

    十分有用有帮助的EXT学习笔记

    3. **Card布局**: Card布局主要用于EXT的Container组件,它将内容分作多个“卡片”,一次只显示一个卡片。这种布局常用于实现类似轮播或选项卡的效果,用户可以通过导航按钮在不同的卡片之间切换。 4. **Form布局**...

    Ext2Mgr环境搭建和源代码

    `EXT2`(第二扩展文件系统)是Linux内核的一个主要组成部分,它在1992年由Rémy Card首次引入,设计目标是提供比当时默认的`Minix`文件系统更高效、更可靠的选择。`EXT2`具有良好的性能和稳定性,但缺乏事务处理,这...

    Ext下解决无弹出窗口的设计办法.docx

    本文将探讨如何在Ext环境下解决无弹出窗口的设计问题,主要涉及“卡片式布局(Card Layout)”和“延迟加载(Lazy Loading)”这两个核心概念。 首先,我们分析传统的弹出窗口或新开标签页的方式。通常,当用户触发...

    Ext Designer Preview3.0汉化版及教程

    - **布局管理**:讲解各种布局模式(如Fit布局、Card布局、Table布局等),以及如何调整布局以适应不同屏幕尺寸。 - **代码生成与同步**:说明如何将设计视图转换为实际的JavaScript代码,并与代码编辑器同步。 ...

Global site tag (gtag.js) - Google Analytics