ExtJS 布局-Column布局(Column layout)
更新记录:
2022年6月1日 开始。
2022年6月4日 发布。
1.说明
使用列布局,可以将容器拆分为特定大小的列,并将子组件放置在这些列中。
可以设置子组件宽度值为: 百分比(相对父容器宽度) 或者 绝对值。
注意:子项组件总是左对齐。
2.设置布局方法
在父容器中设置
layout: 'column'
//或者
layout: {
type: 'column'
}
然后在子组件中使用columnWidth属性设置宽度。
注意:
1.如果设置为百分比,所有子项的columnWidth属性的总和应等于1
2.还可以定义固定宽度。
3.如果子组件宽度同时包含绝对值和百分比,则先减去绝对值再计算百分比。
4.column布局不会管理子组件的高度,最好为父容器设置autoScroll:true
//使用百分比
columnWidth: 0.4,
//使用绝对值
columnWidth: 350,
3.适合和不适合场景
适合场景:
1.将多个子组件进行按多个列进行布局。
2.部分子组件的宽度为固定值,部分子组件的宽度为相对值。
不适合场景:
4.实例
4.1实例:使用列布局
代码:
{
xtype: 'panel',
width: 700,
height: 400,
layout: 'column',
autoScroll: true,
items: [
{
xtype: 'panel',
title: 'Panel Panda 666 com', //哈哈
columnWidth: 0.4,
height: 400,
},
{
xtype: 'panel',
title: 'Panel panda com 666',
columnWidth: 0.6,
layout: 'center',
height: 400
},
{
xtype: 'panel',
title: 'Panel 3',
width: 150,
height: 400
}
]
}
4.2实例:使用列布局混合固定宽度
代码:
{
title: 'Column Layout - Mixed',
width: 450,
height: 250,
layout: 'column',
items: [
{
title: 'Column 1',
width: 100
},
{
title: 'Column 2',
columnWidth: 0.7
},
{
title: 'Column 3',
columnWidth: 0.3
}
],
}
4.3实例:使用百分比
代码:
{
xtype: 'panel',
layout : 'column',
scrollable: true,
requires: ['Ext.layout.container.Column'],
width : 800,
height: 300,
items: [
{
title : 'First Component width 30%',
html : 'This is First Component',
columnWidth : 0.30,
height:800,
},
{
title : 'Second Component width 40%',
html : 'This is Second Component',
columnWidth : 0.40
},
{
title : 'Third Component width 30%',
html : 'This is Third Component' ,
columnWidth : 0.30
}
]
}
4.4实例:使用百分比对半分
代码:
{
xtype: 'panel',
width: 400,
height: 300,
layout: 'column',
items: [
{
xtype: 'panel',
title: 'Child Panel 1',
height: 100,
columnWidth: 0.5
},
{
xtype: 'panel',
title: 'Child Panel 2',
height: 100,
columnWidth: 0.5
}
]
}
ExtJS 布局-Column布局(Column layout)的更多相关文章
- Extjs Column布局常见问题及解决方法
原文地址:http://blog.csdn.net/weoln/article/details/4339533 第一次用Extjs的column布局时遇见了很多问题,记录下来,供大家参考.column ...
- 60.extjs-布局 (在column布局中使用fieldset 和 在fieldset中使用column布局)
转自:https://blog.csdn.net/snn1410/article/details/8817821/ 在标准的html中,需要把输入项都放到fieldset中,一次来显示分组结构.虽然E ...
- ExtJS 布局-Table布局(Table layout)
更新记录: 2022年6月1日 开始. 2022年6月10日 发布. 1.说明 table布局类似表格,通过指定行列数实现布局. 2.设置布局方法 在父容器中指定 layout: 'table' la ...
- ExtJS 布局-HBox 布局(HBox layout)
更新记录: 2022年6月11日 更新文章结构. 2022年6月8日 发布. 2022年6月1日 开始. 1.说明 hbox布局与column布局几乎相同,但hbox允许拉伸列的高度. 既可以在水平方 ...
- flutter 页面布局 Paddiing Row Column Expanded 组件
Flutter Paddiing 组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性.这个时候我们可以用 Pad ...
- 10Flutter页面布局 Padding Row Column Expanded组件详解:
Padding组件: main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* flutter页 ...
- 页面布局 Paddiing Row Column Expanded 组件详解
一.Paddiing 组件 padding EdgeInsetss 设置填充的值 child 组件 return Padding( padding: EdgeIn ...
- 12.Quick QML-QML 布局(Row、Column、Grid、Flow和嵌套布局) 、Repeater对象
1.Row布局 Row中的item可以不需要使用anchors布局,就能通过行的形式进行布局. 并且item可以使用Positioner附加属性来访问有关其在Row中的位置及其他信息. 示例如下所示, ...
- ExtJS 布局-VBox布局(VBox layout)
更新记录: 2022年6月11日 优化文章结构. 2022年6月9日 发布. 2022年6月1日 开始. 1.说明 vbox布局类似auto布局,将子组件一个接一个垂直向下放置,既可以在水平方向也可以 ...
随机推荐
- DOCTYPE(⽂档类型) 的作⽤
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚 ...
- Spring Boot 使用 Redis 共享 Session 代码示例
参考资料 博客:spring boot + redis 实现session共享 1. 新建 Maven 工程 我新建 spring-boot-session-redis maven 工程 2. 引入 ...
- BurpSuite与Xray多级代理实现联动扫描
Xray是长亭科技推出的,最经典的莫过于代理模式下的被动扫描,它使得整个过程可控且更加精细化: 代理模式下的基本架构为,扫描器作为中间人,首先原样转发流量,并返回服务器响应给浏览器等客户端,通讯两端都 ...
- Spring Cloud之负载均衡组件Ribbon原理分析
目录 前言 一个问题引发的思考 Ribbon的简单使用 Ribbon 原理分析 @LoadBalanced 注解 @Qualifier注解 LoadBalancerAutoConfiguration ...
- partTwo自动出题程序
需求介绍 一家软件公司程序员二柱的小孩上了小学二年级,老师让家长每天出30道四则运算题目给小学生做. 二柱立马就想到写一个小程序来做这件事. 这个事情可以用很多语言或者工具来实现: Excel, C/ ...
- python中常用内置函数和关键词
Python 常用内置函数如下: Python 解释器内置了很多函数和类型,您可以在任何时候使用它们.以下按字母表顺序列出它们. 1. abs()函数 返回数字的绝对值. print( abs(-45 ...
- python基础练习题(题目 递归求阶乘)
day18 --------------------------------------------------------------- 实例026:利用递归方法求5! 分析:递归包括递归体和递归条 ...
- vue 收集表单数据 (有错误的请各位大佬指点)
收集表单数据: 若: <input type="text"/>, 则v-model收集 的是value值,用户输入的就是value值. 若 ...
- 使用Visual Studio 2022开发前端
前端开发环境多数基于Node.js,好处不多说了.但与使用Visual Studio开发的后端Asp.Net Core项目一起调试,却不是很方便,所以试着在Visual Studio 2022中开发前 ...
- 以rem为单位,数值较小,border-radius:50%部分浏览器渲染不圆方法
元素使用rem做单位且较小时,对于border-radius:50%在部分浏览器不圆解决方法: 1.将原来宽高扩大至两倍(.1rem --> .2rem),再使用transform:scale( ...