更新记录:

2022年6月1日 开始。

2022年6月4日 发布。

1.说明

使用列布局,可以将容器拆分为特定大小的列,并将子组件放置在这些列中。

可以设置子组件宽度值为: 百分比(相对父容器宽度) 或者 绝对值。

注意:子项组件总是左对齐。

2.设置布局方法

在父容器中设置

  1. layout: 'column'
  2. //或者
  3. layout: {
  4. type: 'column'
  5. }

然后在子组件中使用columnWidth属性设置宽度。

注意:

1.如果设置为百分比,所有子项的columnWidth属性的总和应等于1

2.还可以定义固定宽度。

3.如果子组件宽度同时包含绝对值和百分比,则先减去绝对值再计算百分比。

4.column布局不会管理子组件的高度,最好为父容器设置autoScroll:true

  1. //使用百分比
  2. columnWidth: 0.4,
  3. //使用绝对值
  4. columnWidth: 350,

3.适合和不适合场景

适合场景:

1.将多个子组件进行按多个列进行布局。

2.部分子组件的宽度为固定值,部分子组件的宽度为相对值。

不适合场景:

4.实例

4.1实例:使用列布局



代码:

  1. {
  2. xtype: 'panel',
  3. width: 700,
  4. height: 400,
  5. layout: 'column',
  6. autoScroll: true,
  7. items: [
  8. {
  9. xtype: 'panel',
  10. title: 'Panel Panda 666 com', //哈哈
  11. columnWidth: 0.4,
  12. height: 400,
  13. },
  14. {
  15. xtype: 'panel',
  16. title: 'Panel panda com 666',
  17. columnWidth: 0.6,
  18. layout: 'center',
  19. height: 400
  20. },
  21. {
  22. xtype: 'panel',
  23. title: 'Panel 3',
  24. width: 150,
  25. height: 400
  26. }
  27. ]
  28. }

4.2实例:使用列布局混合固定宽度



代码:

  1. {
  2. title: 'Column Layout - Mixed',
  3. width: 450,
  4. height: 250,
  5. layout: 'column',
  6. items: [
  7. {
  8. title: 'Column 1',
  9. width: 100
  10. },
  11. {
  12. title: 'Column 2',
  13. columnWidth: 0.7
  14. },
  15. {
  16. title: 'Column 3',
  17. columnWidth: 0.3
  18. }
  19. ],
  20. }

4.3实例:使用百分比



代码:

  1. {
  2. xtype: 'panel',
  3. layout : 'column',
  4. scrollable: true,
  5. requires: ['Ext.layout.container.Column'],
  6. width : 800,
  7. height: 300,
  8. items: [
  9. {
  10. title : 'First Component width 30%',
  11. html : 'This is First Component',
  12. columnWidth : 0.30,
  13. height:800,
  14. },
  15. {
  16. title : 'Second Component width 40%',
  17. html : 'This is Second Component',
  18. columnWidth : 0.40
  19. },
  20. {
  21. title : 'Third Component width 30%',
  22. html : 'This is Third Component' ,
  23. columnWidth : 0.30
  24. }
  25. ]
  26. }

4.4实例:使用百分比对半分



代码:

  1. {
  2. xtype: 'panel',
  3. width: 400,
  4. height: 300,
  5. layout: 'column',
  6. items: [
  7. {
  8. xtype: 'panel',
  9. title: 'Child Panel 1',
  10. height: 100,
  11. columnWidth: 0.5
  12. },
  13. {
  14. xtype: 'panel',
  15. title: 'Child Panel 2',
  16. height: 100,
  17. columnWidth: 0.5
  18. }
  19. ]
  20. }

ExtJS 布局-Column布局(Column layout)的更多相关文章

  1. Extjs Column布局常见问题及解决方法

    原文地址:http://blog.csdn.net/weoln/article/details/4339533 第一次用Extjs的column布局时遇见了很多问题,记录下来,供大家参考.column ...

  2. 60.extjs-布局 (在column布局中使用fieldset 和 在fieldset中使用column布局)

    转自:https://blog.csdn.net/snn1410/article/details/8817821/ 在标准的html中,需要把输入项都放到fieldset中,一次来显示分组结构.虽然E ...

  3. ExtJS 布局-Table布局(Table layout)

    更新记录: 2022年6月1日 开始. 2022年6月10日 发布. 1.说明 table布局类似表格,通过指定行列数实现布局. 2.设置布局方法 在父容器中指定 layout: 'table' la ...

  4. ExtJS 布局-HBox 布局(HBox layout)

    更新记录: 2022年6月11日 更新文章结构. 2022年6月8日 发布. 2022年6月1日 开始. 1.说明 hbox布局与column布局几乎相同,但hbox允许拉伸列的高度. 既可以在水平方 ...

  5. flutter 页面布局 Paddiing Row Column Expanded 组件

    Flutter Paddiing 组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性.这个时候我们可以用 Pad ...

  6. 10Flutter页面布局 Padding Row Column Expanded组件详解:

    Padding组件: main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* flutter页 ...

  7. 页面布局 Paddiing Row Column Expanded 组件详解

    一.Paddiing 组件     padding    EdgeInsetss 设置填充的值     child  组件    return Padding(     padding: EdgeIn ...

  8. 12.Quick QML-QML 布局(Row、Column、Grid、Flow和嵌套布局) 、Repeater对象

    1.Row布局 Row中的item可以不需要使用anchors布局,就能通过行的形式进行布局. 并且item可以使用Positioner附加属性来访问有关其在Row中的位置及其他信息. 示例如下所示, ...

  9. ExtJS 布局-VBox布局(VBox layout)

    更新记录: 2022年6月11日 优化文章结构. 2022年6月9日 发布. 2022年6月1日 开始. 1.说明 vbox布局类似auto布局,将子组件一个接一个垂直向下放置,既可以在水平方向也可以 ...

随机推荐

  1. DOCTYPE(⽂档类型) 的作⽤

    DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚 ...

  2. Spring Boot 使用 Redis 共享 Session 代码示例

    参考资料 博客:spring boot + redis 实现session共享 1. 新建 Maven 工程 我新建 spring-boot-session-redis maven 工程 2. 引入 ...

  3. BurpSuite与Xray多级代理实现联动扫描

    Xray是长亭科技推出的,最经典的莫过于代理模式下的被动扫描,它使得整个过程可控且更加精细化: 代理模式下的基本架构为,扫描器作为中间人,首先原样转发流量,并返回服务器响应给浏览器等客户端,通讯两端都 ...

  4. Spring Cloud之负载均衡组件Ribbon原理分析

    目录 前言 一个问题引发的思考 Ribbon的简单使用 Ribbon 原理分析 @LoadBalanced 注解 @Qualifier注解 LoadBalancerAutoConfiguration ...

  5. partTwo自动出题程序

    需求介绍 一家软件公司程序员二柱的小孩上了小学二年级,老师让家长每天出30道四则运算题目给小学生做. 二柱立马就想到写一个小程序来做这件事. 这个事情可以用很多语言或者工具来实现: Excel, C/ ...

  6. python中常用内置函数和关键词

    Python 常用内置函数如下: Python 解释器内置了很多函数和类型,您可以在任何时候使用它们.以下按字母表顺序列出它们. 1. abs()函数 返回数字的绝对值. print( abs(-45 ...

  7. python基础练习题(题目 递归求阶乘)

    day18 --------------------------------------------------------------- 实例026:利用递归方法求5! 分析:递归包括递归体和递归条 ...

  8. vue 收集表单数据 (有错误的请各位大佬指点)

     收集表单数据:        若: <input type="text"/>, 则v-model收集 的是value值,用户输入的就是value值.        若 ...

  9. 使用Visual Studio 2022开发前端

    前端开发环境多数基于Node.js,好处不多说了.但与使用Visual Studio开发的后端Asp.Net Core项目一起调试,却不是很方便,所以试着在Visual Studio 2022中开发前 ...

  10. 以rem为单位,数值较小,border-radius:50%部分浏览器渲染不圆方法

    元素使用rem做单位且较小时,对于border-radius:50%在部分浏览器不圆解决方法: 1.将原来宽高扩大至两倍(.1rem --> .2rem),再使用transform:scale( ...