`
ytm
  • 浏览: 13528 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论

ExtJS layout的9种样式详解(转)

EXTHTML活动 
阅读更多

ExtJS中layout的9种样式风格

extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种

一、  absolute 顾名思义，在容器内部，根据指定的坐标定位显示

二、  accordion 这个是最容易记的，手风琴效果 ，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式

Js代码 复制代码
  1.    Ext.onReady(function(){      
  2.   
  3.    var panel=new Ext.Panel( {//Ext.formPanel就是Panel中用了form布局              
  4.   
  5.           renderTo:'paneldiv',      
  6.   
  7.           title:'容器组件',      
  8.   
  9.           layout:'accordion',             
  10.   
  11.           width:500,      
  12.   
  13.           height:200,      
  14.   
  15.           layoutConfig:{animate:false}, // 表示在执行展开折叠时是否应用动画效果   
  16.   
  17.           items:[      
  18.   
  19.         {title:'元素1',html:''},      
  20.   
  21.         {title:'元素2',html:''},      
  22.   
  23.         {title:'元素3',html:''},      
  24.   
  25.         {title:'元素4',html:''}      
  26.   
  27.        ]      
  28.   
  29.       }      
  30.   
  31.      );      
  32.   
  33. });   
       Ext.onReady(function(){   

       var panel=new Ext.Panel( {//Ext.formPanel就是Panel中用了form布局           

              renderTo:'paneldiv',   

              title:'容器组件',   

              layout:'accordion',          

              width:500,   

              height:200,   

              layoutConfig:{animate:false}, // 表示在执行展开折叠时是否应用动画效果

              items:[   

            {title:'元素1',html:''},   

            {title:'元素2',html:''},   

            {title:'元素3',html:''},   

            {title:'元素4',html:''}   

           ]   

          }   

         );   

    });

 

 

 

 

上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板执行结果将生成如下图所示的界面：----001----



  

三、anchor 这个效果具体还不知道有什么用，就是知道注意一下

1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值

 

 

四、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。

                    该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：

例一：

Js代码 复制代码
  1. Ext.onReady(function(){    
  2.   
  3.                     new Ext.Viewport({   
  4.   
  5.                                         layout:"border",   
  6.   
  7.                                         items:[{   
  8.   
  9.                                                             region:"north",   
  10.   
  11.                                                             height:50,   
  12.   
  13.                                                             title:"顶部面板"  
  14.   
  15.                                         },   
  16.   
  17.                                         {region:"south",   
  18.   
  19.                                         height:50,   
  20.   
  21.                                         title:"底部面板"},   
  22.   
  23.                                         {region:"center",   
  24.   
  25.                                         title:"中央面板"},   
  26.   
  27.                                         {region:"west",   
  28.   
  29.                                         width:100,   
  30.   
  31.                                         title:"左边面板"},   
  32.   
  33.                                         {region:"east",   
  34.   
  35.                                         width:100,   
  36.   
  37.                                         title:"右边面板"}   
  38.   
  39.                                         ]   
  40.   
  41.                     });    
  42.   
  43. });  
Ext.onReady(function(){ 

                    new Ext.Viewport({

                                        layout:"border",

                                        items:[{

                                                            region:"north",

                                                            height:50,

                                                            title:"顶部面板"

                                        },

                                        {region:"south",

                                        height:50,

                                        title:"底部面板"},

                                        {region:"center",

                                        title:"中央面板"},

                                        {region:"west",

                                        width:100,

                                        title:"左边面板"},

                                        {region:"east",

                                        width:100,

                                        title:"右边面板"}

                                        ]

                    }); 

});

 ----002----

 

 

 

 

  

例二：

Js代码 复制代码
  1. Ext.onReady(function(){           
  2.   
  3. var b = new Ext.Button({   
  4.   
  5.     id:"show-btn",           //定义按钮的ID   
  6.   
  7.     text:"弹出按钮",        //定义按钮的标题                       
  8.   
  9.     renderTo:document.body//将弹出按钮渲染到窗体上   
  10.   
  11. });   
  12.   
  13. var button = Ext.get('show-btn');      
  14.   
  15. var win;              
  16.   
  17. button.on('click', function() {    
  18.   
  19.     //创建TabPanel      
  20.   
  21.     var tabs = new Ext.TabPanel({      
  22.   
  23.         region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间      
  24.   
  25.         margins: '3 3 3 0',      
  26.   
  27.         activeTab: 0,   //当前选项卡是第1个(从0开始)   
  28.   
  29.         defaults: {      
  30.   
  31.             autoScroll: true      
  32.   
  33.         },      
  34.   
  35.         items: [{      
  36.   
  37.             title: 'Bogus Tab',      
  38.   
  39.             html: "第一个Tab的内容."      
  40.   
  41.         }, {      
  42.   
  43.             title: 'Another Tab',      
  44.   
  45.             html: "我是另一个Tab"      
  46.   
  47.         }, {      
  48.   
  49.             title: 'Closable Tab',      
  50.   
  51.             html: "这是一个可以关闭的Tab",      
  52.   
  53.             closable: true //显示关闭按钮     
  54.   
  55.         }]      
  56.   
  57.         });      
  58.   
  59.         //定义一个Panel      
  60.   
  61.         var nav = new Ext.Panel({      
  62.   
  63.             title: 'Navigation',      
  64.   
  65.             region: 'west', //放在西边，即左侧      
  66.   
  67.             split: true,   //设置为分割   
  68.   
  69.             width: 200,      
  70.   
  71.             collapsible: true, //允许伸缩      
  72.   
  73.             margins: '3 0 3 3',      
  74.   
  75.             cmargins: '3 3 3 3'      
  76.   
  77.         });         
  78.   
  79.         //如果窗口第一次被打开时才创建      
  80.   
  81.         if (!win) {      
  82.   
  83.             win = new Ext.Window({      
  84.   
  85.                 title: 'Layout Window',      
  86.   
  87.                 closable: true,   //显示关闭按钮   
  88.   
  89.                 width: 600,      
  90.   
  91.                 height: 350,      
  92.   
  93.                 border : false,      
  94.   
  95.                 plain: true,      
  96.   
  97.                 layout: 'border',      
  98.   
  99.                 closeAction:'hide',      
  100.   
  101.                 items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局      
  102.   
  103.             });      
  104.   
  105.         }      
  106.   
  107.         win.show(button);      
  108.   
  109.     });      
  110.   
  111. });      
  112.   
  113. });   
Ext.onReady(function(){        

var b = new Ext.Button({

    id:"show-btn",           //定义按钮的ID

    text:"弹出按钮",        //定义按钮的标题                    

    renderTo:document.body//将弹出按钮渲染到窗体上

});

var button = Ext.get('show-btn');   

var win;           

button.on('click', function() { 

    //创建TabPanel   

    var tabs = new Ext.TabPanel({   

        region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间   

        margins: '3 3 3 0',   

        activeTab: 0,   //当前选项卡是第1个(从0开始)

        defaults: {   

            autoScroll: true   

        },   

        items: [{   

            title: 'Bogus Tab',   

            html: "第一个Tab的内容."   

        }, {   

            title: 'Another Tab',   

            html: "我是另一个Tab"   

        }, {   

            title: 'Closable Tab',   

            html: "这是一个可以关闭的Tab",   

            closable: true //显示关闭按钮  

        }]   

        });   

        //定义一个Panel   

        var nav = new Ext.Panel({   

            title: 'Navigation',   

            region: 'west', //放在西边，即左侧   

            split: true,   //设置为分割

            width: 200,   

            collapsible: true, //允许伸缩   

            margins: '3 0 3 3',   

            cmargins: '3 3 3 3'   

        });      

        //如果窗口第一次被打开时才创建   

        if (!win) {   

            win = new Ext.Window({   

                title: 'Layout Window',   

                closable: true,   //显示关闭按钮

                width: 600,   

                height: 350,   

                border : false,   

                plain: true,   

                layout: 'border',   

                closeAction:'hide',   

                items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局   

            });   

        }   

        win.show(button);   

    });   

});   

});

 ----003----

 

 

 

 

 

五、card 像安装向导一样，一张一张显示，布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码：

例一：

Js代码 复制代码
  1. Ext.onReady(function(){    
  2.   
  3.     var panel=new Ext.Panel({   
  4.   
  5.         renderTo:"hello",   
  6.   
  7.         title:"容器组件",   
  8.   
  9.         width:300,   
  10.   
  11.         height:200,   
  12.   
  13.         layout:"card",   
  14.   
  15.         activeItem: 0,   
  16.   
  17.         layoutConfig: {   
  18.   
  19.             animate: true    
  20.   
  21.         },   
  22.   
  23.         items:[   
  24.   
  25.             {title:"子元素1",html:"这是子元素1中的内容"},   
  26.   
  27.             {title:"子元素2",html:"这是子元素2中的内容"},   
  28.   
  29.             {title:"子元素3",html:"这是子元素3中的内容"}   
  30.   
  31.         ],   
  32.   
  33.         buttons:[{text:"切换",handler:changeTab}]   
  34.   
  35.     });   
  36.   
  37.     var i=1;   
  38.   
  39.     function changeTab(){    
  40.   
  41.         panel.getLayout().setActiveItem(i++);    
  42.   
  43.         if(i>2)i=0;   
  44.   
  45.     }   
  46.   
  47. });  
Ext.onReady(function(){ 

    var panel=new Ext.Panel({

        renderTo:"hello",

        title:"容器组件",

        width:300,

        height:200,

        layout:"card",

        activeItem: 0,

        layoutConfig: {

            animate: true 

        },

        items:[

            {title:"子元素1",html:"这是子元素1中的内容"},

            {title:"子元素2",html:"这是子元素2中的内容"},

            {title:"子元素3",html:"这是子元素3中的内容"}

        ],

        buttons:[{text:"切换",handler:changeTab}]

    });

    var i=1;

    function changeTab(){ 

        panel.getLayout().setActiveItem(i++); 

        if(i>2)i=0;

    }

});

 

 

 

上面的代码创建了一个容器组件面板，面板中包含三个子面板元素，父容器包含一个“切换”按钮，点击该按钮将会执行changeTab函数，该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示：004

 

 

点击一下“切换”按钮，结果如下图所示：005



  

分享到：
| Spket在Eclipse/MyEclipse下的安装和配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJS layout的9种样式详解

    本文将详细介绍ExtJS的9种布局样式，帮助开发者更好地理解和应用这些布局。 1. **Absolute Layout**： Absolute布局允许你在容器内根据指定的坐标定位显示组件。每个子组件需要有x和y坐标来确定其在容器中的位置。...

    extjs4-教程

    ExtJS4布局详解 ExtJS4提供了多种布局管理器，允许开发人员对组件进行布局控制。在上述示例中，使用了`layout:'fit'`，它使得内部组件填充整个viewport。ExtJS4还有如`border`、`card`等多种布局选项，开发人员...

    extjs实践大量实例讲解

    4. **主题定制**：ExtJS 具有强大的主题定制能力，允许开发者自定义界面样式，满足个性化需求。 #### 示例详解 下面我们将通过一系列具体示例来逐步学习 ExtJS 的使用方法： ### 示例 1：创建一个简单的窗口 ```...

    ExtJs部署及使用方法

    ### ExtJs部署及使用方法详解 #### 一、ExtJs部署与配置 ##### 1.1 ExtJs库的安装 为了正确地安装ExtJs库，首先需要将ExtJs的源码包放置到项目的WebRoot目录下，即项目的根目录。在安装过程中，需要创建以下...

    extjs—chart柱形图 例子

    ExtJS是一种用于构建现代化Web应用程序的框架，特别适用于开发丰富的客户端界面。它提供了大量的UI组件，包括表格、网格、图表等，使得开发者能够快速创建复杂的前端应用。 #### 二、ExtJS中的图表功能 ExtJS内置...

    ExtJS 3.2的中文参考手册

    ### ExtJS 3.2 的中文参考手册知识点详解 #### 1. **EXT简介** - **定位**: 作为一款强大的JavaScript框架，ExtJS主要用于构建Web应用程序的用户界面。ExtJS 3.2版本是一个成熟且稳定的版本，在此版本中包含了丰富...

    精通JS脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    学习extjs4的极品资料,看它比看视频学得快

    ### Extjs4学习资源概述与知识点详解 #### 标题：学习extjs4的极品资料,看它比看视频学得快 此标题强调了该资料对于学习Extjs4的重要性，将其定位为一种高效的学习资源，相较于观看视频教程更为快捷有效。 #### ...

    Extjs fieldset两行两列布局

    在Extjs框架中，`FieldSet`是一种常见的组件，常用于组织一组相关的表单字段，并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`FieldSet`。 #### 一、整体结构设计 首先...

    ExtJS4.2入门教程

    ### ExtJS4.2入门教程知识点详解 #### 一、ExtJS4.2简介与配置 **1.1 ExtJS4.2概述** ExtJS是一款基于JavaScript的企业级Web应用程序前端框架，它提供了一系列丰富的UI组件和强大的数据处理能力，使得开发者能够...

    Extjs4学习指南

    Extjs 提供了多种布局方式，每种布局都有其独特的用途和特点。 ##### 2.1 Fit布局 - **特点**：容器的尺寸会根据子项的最大尺寸来调整自身大小，适合单一内容的展示。 - **应用场景**：适用于仅有一个子项或需要让...

    AnyFo_-_ExtJS_移魂大法

    ### AnyFo - ExtJS “移魂大法”详解 #### 1. 环境搭建 在进行ExtJS开发之前，首先需要搭建好开发环境。本章节将详细介绍如何配置一个基本的ExtJS开发环境。 ##### 搭建步骤： 1. **下载ExtJS库**： - 访问...

    extjs_layou

    ### ExtJS 布局详解 #### 一、Column Layout（列布局） **Column Layout** 是一种用于在容器内组织多个子元素，并让这些子元素按照一定的列宽比例分布的布局方式。它允许用户通过 `columnWidth` 或 `width` 属性来...

    extjs的的初步开发步骤

    【ExtJS初步开发步骤详解】 在进行ExtJS的开发之前，我们需要了解并准备一些必要的文件和资源。ExtJS是一款强大的JavaScript框架，用于构建富客户端Web应用程序。以下是一份详细的初步开发步骤指南： **一、准备...

    ExtJs入门实例

    ### ExtJs2.0入门实例知识点详解 #### 1. Ext.MessageBox - **Ext.MessageBox.alert()** - **用途**: 显示一个简单的警告框。 - **参数**: - `title` (必需): 弹出框的标题。 - `msg` (必需): 显示的信息。 ...

    Extjs4佈局詳解

    ### Extjs4 Fit 布局详解 #### 1. 概述 在Extjs4中，Fit布局是一种特殊的布局管理器，它主要用于确保子组件能够自动填充整个父容器的空间。这种布局方式非常适合用于实现一个全屏显示的效果，或者根据父容器的变化...

    extjs入门教程

    ### ExtJS 入门教程详解 #### 一、ExtJS 概览 ##### 1.1 ExtJS 定义及特点 - **定义**: ExtJS 是一款强大的前端框架，主要用于构建复杂的用户界面（UI），其核心特性在于它是一个与后台技术相对独立的前端 AJAX ...

Magicbox
Global site tag (gtag.js) - Google Analytics