序言:

笔者用的ExtJs版本:ext-3.2.0

ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor

另外,不常见的布局有:tab、vbox、hbox

本文所有实例代码已提供下载,下载链接:ExtJs常用布局--layout详解实例代码

简介:

最常用的边框布局——BorderLayout

最简单的布局——FitLayout

制作伸缩菜单的布局——Accordion

实现操作向导的布局——CardLayout

控制位置和大小的布局——AbsoluteLayout

表单专用的布局——FormLayout

分列布局——ColumnLayout

表格状布局——TabelLayout

BoxLayout——HBox

BoxLayout——VBox

一、border 布局

简介:也称“边界布局”、“方位布局”。该布局把容器分为东、南、西、北、中五个区域,分别由east、south、west、north、center表示。我们需要在items中使用region参数来给它定位。

注意:north和south部分只能设置高度(height),west和east部分只能设置宽度(width)。center区域必须有,且它的大小是在其他4个部分设置好以后自动计算出来的,所以不能为它指定宽度值或高度值。

js代码:

  1.  
    var borderPanel = new Ext.Panel({
  2.  
    renderTo: 'borderDiv',
  3.  
    layout: 'border',
  4.  
    tltle: 'Border Layout',
  5.  
    width: 1000,
  6.  
    height: 800,
  7.  
    defaults: {
  8.  
    collapsible: true, // 支持该区域的展开和折叠
  9.  
    split: true, // 支持用户拖放改变该区域的大小
  10.  
    bodyStyle: 'padding:15px'
  11.  
    },
  12.  
    items: [{
  13.  
    title: 'Footer-s',
  14.  
    region: 'south',
  15.  
    height: 100,
  16.  
    minSize: 75,
  17.  
    maxSize: 250,
  18.  
    html: '这是南边区域 south'
  19.  
     
  20.  
    }, {
  21.  
    titlr: 'Main Content-c',
  22.  
    region: 'center',
  23.  
    collapsible: false,
  24.  
    html: '这是中间区域 center'
  25.  
    }, {
  26.  
    title: 'Navigation-w',
  27.  
    region: 'west',
  28.  
    width: 150,
  29.  
    minSize: 100,
  30.  
    maxSize: 250,
  31.  
    html: '这是西边区域 west'
  32.  
    }, {
  33.  
    title: 'North',
  34.  
    region: 'north',
  35.  
    height: 100,
  36.  
    html: '这是北边区域 north'
  37.  
    }, {
  38.  
    title: 'East',
  39.  
    region: 'east',
  40.  
    width: 150,
  41.  
    html: '这是东边区域 east'
  42.  
    }]
  43.  
    });</span>

运行结果:

二、form 布局

简介:也称“表单布局”。是一种专门用于管理表单中输入字段的布局,这种布局在程序中主要用于创建表单字段或表单元素使用。

注意:它可以是一种布局样式,也可以是一个组件。也就是说既可以 layout : ‘form’ 也可以 new Ext.FormPanel 来使用它。区别就是对于 Panel 我们配置了 layout 为 form ,而对于 FormPanel 它默认的布局就是form布局,所以对于习惯于用 Panel 而不习惯用 FormPanel 的朋友尽管用Panel,但是一定要考虑好提交的问题,如果使用 panel 的话,要做提交可是要一个个获得控件的值的,而 FromPanel 则不需要。

js代码:

  1.  
    var formPanel = new Ext.FormPanel({
  2.  
    renderTo: 'formDiv',
  3.  
    width: 500,
  4.  
    height: 300,
  5.  
    labelWidth: 80,
  6.  
    defaultType: 'textfield',
  7.  
    frame: true,
  8.  
    items: [{
  9.  
    fieldLabel: '用户名',
  10.  
    name: 'username'
  11.  
    }, {
  12.  
    fieldLabel: '密码',
  13.  
    name: 'password'
  14.  
    }, {
  15.  
    fieldLabel: '日期',
  16.  
    name: 'date',
  17.  
    xtype: 'datefield',
  18.  
    }]
  19.  
    });</span>

运行结果:

三、absolute 布局

简介:也称“绝对定位布局”。该布局使用很简单粗暴,直接给出其x、y值来定位即可。

注意:x、y值是相对其父容器而言,从左上角(0,0)开始计算。

js代码:

  1.  
    var absolutePanel = new Ext.Panel({
  2.  
    renderTo: 'absoluteDiv',
  3.  
    layout: 'absolute',
  4.  
    title: 'Absolute Layout',
  5.  
    width: 500,
  6.  
    height: 300,
  7.  
    items: [{
  8.  
    title: 'panel-1',
  9.  
    x: 50,
  10.  
    y: 50,
  11.  
    html: 'x:50,y:50'
  12.  
    }, {
  13.  
    title: 'panel-2',
  14.  
    x: 100,
  15.  
    y: 100,
  16.  
    html: 'x:100,y:100',
  17.  
    }]
  18.  
    });</span>

运行结果:

四、column 布局

简介:也称“列布局”。该布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过子元素制定columnWidth和width来制定列的宽度,columnWidth是按百分比来制定列的宽度,width是按照绝对像素来制定列的宽度。在实际应用中可以两种混合使用。

注意:该布局的子面板的所有columnWidth值必须在0~1之间或者是百分比。columnWidth值的总和应该为1,即100%。另外,如果任何子面板没有指定columnWidth值,那么它将占满剩余的空间。

js代码:

  1.  
    var columnPanel = new Ext.Panel({
  2.  
    renderTo: 'columnDiv',
  3.  
    layout: 'column',
  4.  
    width: 500,
  5.  
    height: 300,
  6.  
    items: [{
  7.  
    title: 'Width = 25%',
  8.  
    columWidth: .25,
  9.  
    html: '111111111111'
  10.  
    }, {
  11.  
    title: 'Width = 75%',
  12.  
    columnWidth: .75,
  13.  
    html: '111111111111'
  14.  
    }, {
  15.  
    title: 'Width = 200px',
  16.  
    width: 200,
  17.  
    html: '111111111111'
  18.  
    }]
  19.  
    });</span>

运行结果:

五、accordion 布局

简介:也称“可折叠布局”、“手风琴布局”。该布局的容器的子元素是可折叠的形式表现。

注意:只有Ext.Panels 和所有Ext.panel.Panel 子项,才可以使用accordion布局。

js代码:

  1.  
    var accordionPanel = new Ext.Panel({
  2.  
    renderTo: 'accordionDiv',
  3.  
    layout: 'accordion',
  4.  
    title: 'Accordion Layout',
  5.  
    width: 500,
  6.  
    height: 300,
  7.  
    layoutConfig: {animate: false},
  8.  
    items: [{
  9.  
    title: 'panel-1', html: 'hello accordion'
  10.  
    }, {
  11.  
    title: 'panel-2', html: '<p>段落</p>'
  12.  
    }, {
  13.  
    title: 'panel-3', html: '<a href="https://www.baidu.com" target="_blank">百度一下,你就知道</a>'
  14.  
    }, {
  15.  
    title: 'panel-4', html: '<button>按钮</button>'
  16.  
    }]
  17.  
    });</span>

运行结果:

六、table 布局

简介:也称“表格布局”。按照普通表格的方法布局子元素,用 layoutConfig:{columns:3} ,//将父容器分成3列。它的item可配置的参数有:rowspan 合并的行数;colspan 合并的列数。

注意:table布局本身并没有什么特殊功能,它所实现的效果其实完全可以用 border 布局和 column 布局等方式代替,而且这些布局方式更灵活。

js代码:

  1.  
    <pre name="code" class="javascript">var tablePanel = new Ext.Panel({
  2.  
    renderTo: 'tableDiv',
  3.  
    width: 500,
  4.  
    height: 300,
  5.  
    layout: 'table',
  6.  
    layoutConfig: {columns: 3},//定义了一共要分3列
  7.  
    items: [
  8.  
    {title: 'panel-1', html: '1111111111',rowspan:2},//合并了2行
  9.  
    {title: 'panel-2', html: '2222222222',colspan:2},//合并了2列
  10.  
    {title: 'panel-3', html: '3333333333'},
  11.  
    {title: 'panel-4', html: '4444444444'}
  12.  
    ]
  13.  
    });

运行结果:

七、fit 布局

简介:也称“自适应布局”。子元素将自动填满整个父容器。。

注意:在fit布局下,对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件,则只会显示第一个子元素。

js代码:

  1.  
    var fitPanel = new Ext.Panel({
  2.  
    renderTo: 'fitDiv',
  3.  
    layout: 'fit',
  4.  
    width: 500,
  5.  
    height: 300,
  6.  
    items: [{
  7.  
    title: 'Fit Panel',
  8.  
    html: '111111111111'
  9.  
    }]
  10.  
    });</span>

运行结果:

八、card 布局

简介:也称“卡牌布局”、“卡片式布局”。该布局最TMD麻烦了。这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分步提交。

注意:由于此布局本身不提供分步导航功能,所以需要用户自己开发该功能。可以通过调用 setActiveItem( ) 函数来实现跳转。由于只有一个面板处于显示状态,那么在初始时,我们可以使用 activeItem: 属性来指定某一个面板的显示。对了,如果Ext-4 之后的版本就不是这样操作了。

js代码:

  1.  
    // card布局所需要的跳转方法-setActiveItem
  2.  
    var i=0;
  3.  
    var navHandler = function(direction){
  4.  
     
  5.  
    if (direction == -1){
  6.  
    i--;
  7.  
    if (i < 0) { i = 0;}
  8.  
    }
  9.  
    if (direction == 1){
  10.  
    i++;
  11.  
    if (i > 2) { i = 2; return false;}
  12.  
    }
  13.  
    cardPanel.getLayout().setActiveItem(i);
  14.  
    };
  15.  
     
  16.  
    var cardPanel = new Ext.Panel({
  17.  
    renderTo: 'cardDiv',
  18.  
    layout: 'card',
  19.  
    title:'注册向导',
  20.  
    width: 500,
  21.  
    height: 300,
  22.  
    activeItem: 0,
  23.  
    bodyStyle:'padding:15px',
  24.  
    defaults:{
  25.  
    border:false
  26.  
    },
  27.  
    bbar: [ {
  28.  
    id: 'move-prev',
  29.  
    text: '«Previous',
  30.  
    handler:navHandler.createDelegate(this,[-1])
  31.  
    },'->', {
  32.  
    id: 'move-next',
  33.  
    text: 'Next »',
  34.  
    handler:navHandler.createDelegate(this,[1])
  35.  
    }],
  36.  
    items: [{
  37.  
    id: 'card-0',
  38.  
    html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
  39.  
    }, {
  40.  
    id: 'card-1',
  41.  
    html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
  42.  
    }, {
  43.  
    id: 'card-2',
  44.  
    html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
  45.  
    }]
  46.  
    });</span>

运行结果:

九、anchor 布局

简介:也称“锚点布局”。感觉无卵用, anchor布局将使组件固定于父容器的某一个位置,使用anchor布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

注意:anchor属性为一组字符串,可以使用百分比或者是-数字(注意前面是有负号的,即数字为负数)来表示,字符串之间用空格隔开。

js代码:

  1.  
    var anchorPanel = new Ext.Panel({
  2.  
    renderTo: 'anchorDiv',
  3.  
    layout: 'anchor',
  4.  
    title: 'Anchor Layout',
  5.  
    width: 500,
  6.  
    height: 300,
  7.  
    items: [{
  8.  
    title: 'panel-1',
  9.  
    height: 100,
  10.  
    anchor: '-50',
  11.  
    html: '高度等于100,宽度 = 容器宽度 - 50'
  12.  
    }, {
  13.  
    title: 'panel-2',
  14.  
    height: 100,
  15.  
    anchor: '50%',
  16.  
    html: '高度等于100,宽度 = 容器宽度的50%'
  17.  
    },{
  18.  
    title:'panel-3',
  19.  
    anchor: '50% 50%',
  20.  
    html: '高度、宽度 = 容器的50%'
  21.  
    }]
  22.  
    });</span>

运行结果:

十、tab 布局

简介:也称“分页布局”、“标签布局”。

注意:码字好累,这个布局你懂得,不多说了。

js代码:

  1.  
    var tabPanel = new Ext.TabPanel({
  2.  
    renderTo: 'tabDiv',
  3.  
    width: 500,
  4.  
    height: 300,
  5.  
    activeTab: 0, // 默认显示第一个Tab的内容
  6.  
    defaults: {
  7.  
    autoScroll: true
  8.  
    },
  9.  
    items: [{
  10.  
    title: 'Tab-0',
  11.  
    html: "第一个Tab的内容"
  12.  
    }, {
  13.  
    title: 'Tab-1',
  14.  
    html: '我是另一个Tab',
  15.  
    }, {
  16.  
    title: 'Tab-2',
  17.  
    html: '这是一个可以关闭的Tab',
  18.  
    closable: true
  19.  
    }]
  20.  
    });</span>

运行结果:

十一、vbox 布局

简介:也称“竖直布局”。vertical box ,垂直方向的分行显示。它的 item 有一个 flex属性,其值越大,对应的组件就会占据越大的空间。

注意:无

js代码:

  1.  
    var vboxPanel = new Ext.Panel({
  2.  
    renderTo: 'vboxDiv',
  3.  
    layout: {
  4.  
    type: 'vbox',
  5.  
    align: 'stretch' //拉伸使其充满整个父容器
  6.  
    },
  7.  
    width: 500,
  8.  
    height: 300,
  9.  
    items: [{
  10.  
    title: 'panel-1', html: 'flex:1', flex: 1
  11.  
    }, {
  12.  
    title: 'panel-2', html: 'height:150', height: 150
  13.  
    }, {
  14.  
    title: 'panel-3', html: 'flex:2', flex: 2
  15.  
    }]
  16.  
    });</span>

运行结果:

十二、hbox 布局

简介:也称“水平布局”。horizontal box ,水平方向的分列显示。和 vbox 类似,有flex 属性。

注意:无

js代码:

  1.  
    var hbox = new Ext.Panel({
  2.  
    renderTo: 'hboxDiv',
  3.  
    layout: {
  4.  
    type: 'hbox',
  5.  
    align: 'stretch'
  6.  
    },
  7.  
    width: 500,
  8.  
    height: 300,
  9.  
    items: [{
  10.  
    title: 'panel-1', html: 'flex:1', flex: 1
  11.  
    }, {
  12.  
    title: 'panel-2', html: 'height:150', width: 150
  13.  
    }, {
  14.  
    title: 'panel-3', html: 'flex:2', flex: 2
  15.  
    }]
  16.  
    })</span>

运行结果:

总结:

简单总结起来border布局一般作为页面整体布局来使用;fit布局适用于那种需要将子类完全占满父类容器的情况;column布局用于多列;form是一种表单特有布局方式,实质是一行一控件的形式;table布局适用多行多列但是有时宽高不太容易控制。而且值得强调的一点就是给一个控件设置layout属性,其实指的是其内部控件的布局方式而不是它本身的布局,这点要搞清楚。

----------------------------------------------------- end -----------------------------------------------------

最后感谢以下链接的作者提供的资源参考:

ExtJs布局详解

ExtJS中layout的12种布局风格

extjs布局方式

ExtJS之布局篇

原文链接:https://blog.csdn.net/fifteen718/article/details/51482826

ExtJs常用布局--layout详解(含实例)的更多相关文章

  1. 3.ExtJs常用布局--layout详解(含实例)

    转自:https://blog.csdn.net/fifteen718/article/details/51482826

  2. log4j.properties配置详解与实例

    log4j.properties配置详解与实例 第一步:加入log4j-1.x.x.jar到lib下. 第二步:在工程的src下下建立log4j.properties.内容如下: #OFF,syste ...

  3. Extjs MVC开发模式详解

    Extjs MVC开发模式详解   在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...

  4. Java学习-007-Log4J 日志记录配置文件详解及实例源代码

    此文主要讲述在初学 Java 时,常用的 Log4J 日志记录配置文件详解及实例源代码整理.希望能对初学 Java 编程的亲们有所帮助.若有不足之处,敬请大神指正,不胜感激!源代码测试通过日期为:20 ...

  5. 转:springmvc常用注解标签详解

    Spring5:@Autowired注解.@Resource注解和@Service注解 - IT·达人 - 博客园--这篇顺序渐进,讲得超级好--此人博客很不错http://www.cnblogs.c ...

  6. httpd配置文件详解及实例

    httpd配置文件详解及实例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.http协议的组成 http协议是C/S架构:我们可以把浏览器(如:IE,Firefox,Safar ...

  7. 【第六课】Nginx常用配置下详解

    目录 Nginx常用配置下详解 1.Nginx虚拟主机 2.部署wordpress开源博客 3.部署discuz开源论坛 4.域名重定向 5.Nginx用户认证 6.Nginx访问日志配置 7.Ngi ...

  8. Javascript常用的设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  9. 约束布局ConstraintLayout详解

    约束布局ConstraintLayout详解 转 https://www.jianshu.com/p/17ec9bd6ca8a 目录 1.介绍 2.为什么要用ConstraintLayout 3.如何 ...

随机推荐

  1. zoj3956(Course Selection System)_Solution

    zoj3956_Solution H=sum(hi),C=sum(ci),Value=H*H-H*C-C*C 求Value的最大值 Solution: 动态规划: 共两维:H,C           ...

  2. 2018acm-icpc宁夏邀请赛后记

    由于要准备期末考试的缘故,时隔一个月之后我才想起来还有一场比赛没有总结. 大概是出去过的最远的地方了,宁夏理工学院离杭州有两千多千米. 不得不说感到了主办方满满的诚意,虽然是第一次办比赛,但是第一天组 ...

  3. LoadRunner web请求和响应中文乱码解决办法

    先来认识下lr_convert_string_encoding: int lr_convert_string_encoding( const char *sourceString, const cha ...

  4. selenium_采集药品数据1_采集第一页表格

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  5. python---redis缓存页面前戏之剖析render源码

    1.初始代码: def get(self, *args, **kwargs): import time tm = time.time() self.render('home/index.html', ...

  6. C#字体与Rectangle简单对应关系

    在1920*1080 无缩放分辨率下,Rectangle要至少是字体的2倍+2才不会被遮挡.

  7. 图片压缩之-JPEGCodec失效替换方案

    今天遇到一个405错误,提示Method not allowed ,一直以为是控制器出问题了,后来发现实际上是Jpeg库有问题.刚开始用这个库,没想到已经不推荐使用了.下面是网上找的解决方案.http ...

  8. JS简史

    一.产生背景 1)在JavaScript问世之前,必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域,是否输入了无效的值: 2)为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负 ...

  9. buildroot构建项目(五)--- u-boot 2017.11 适配开发板修改 3 ---- 系统启动初始化之二

    一.cpu_init_crit 当执行完时钟初始化后,程序执行: bl    cpu_init_crit 跳转到CPU初始化处进行,在其中主要是执行 caches 的关闭 和 MMU的关闭,之后跳转到 ...

  10. Hadoop mapreduce执行过程涉及api

    资源的申请,分配过程略过,从开始执行开始. mapper阶段: 首先调用默认的PathFilter进行文件过滤,确定哪些输入文件是需要的哪些是不需要的,然后调用inputFormat的getSplit ...