ExtJS 布局-Border 布局(Border layout)
更新记录:
2022年6月11日 发布。
2022年6月1日 开始。
1.说明
边框布局允许根据区域(如中心、北部、南部、西部和东部)指定子部件的位置。还可以调整子组件的大小和折叠。
2.设置布局方法
在父容器中设置布局
layout: 'border',
//或者
layout: {
type: 'border'
},
然后在子组件中设置显示的区域。
注意:必须始终有一个以区域(region)为中心的组件。
region: 'center', //设置中部区域
region: 'east', //设置东部区域
region: 'west', //设置西部区域
region: 'north', //设置北部区域
region: 'south', //设置南部区域
2.布局相关配置
使用split属性设置可以调整窗口尺寸大小(注意:这是设置在全局,不是在布局中)。
使用frame属性设置显示边框(注意:这是设置在全局,不是在布局中)。
defaults: {
split: true, //允许用户自定义调整窗口大小
frame: true //显示边框
collapsed: true //折叠状态
titleCollapse: true, //点击子元素的标题就可以折叠
collapsible: true //可以折叠内容区
},
3.适合场景
适合场景:
1.后台管理界面布局。
2.工具软件界面布局。
4.实例
4.1实例:分别定义各个区域
代码:
{
xtype: 'panel',
width: 700,
height: 400,
layout: {
type: 'border'
},
items: [
{
title: 'Item 1',
html: 'north - Item 1',
region: 'north', //设置北部区域
collapsible: true, //设置可以折叠
maxWidth: 800, //最大宽度
maxHeight: 300, //最大高度
collapseMode: 'mini' //允许最大程度的隐藏
},
{
title: 'Item 2',
html: 'west - Item 2',
region: 'west', //设置西部区域
width: 200,
collapsible: true
},
{
title: 'Item 1',
html: 'center - Item 1',
region: 'center' //设置中部区域
},
{
title: 'Item 2',
html: 'east - Item 2',
region: 'east', //设置东部区域
width: 200,
collapsible: true
},
{
title: 'Item 3',
html: 'south - Item 3',
region: 'south', //设置南部区域
height: 100,
collapsible: true
}
]
}
4.2实例:一个Viewport视窗布局
代码:
Ext.define('PandaApp.view.panda.Panda',{
extend: 'Ext.Viewport',
requires: [
'Ext.panel.Panel',
'PandaApp.view.PandaController',
'PandaApp.view.PandaModel'
],
title: 'Panel Container',
controller: 'panda',
viewModel: {
type: 'panda'
},
//======================核心代码==============
layout: 'border',
defaults: {
split: true
},
items: [
{
title: 'north',
html: 'north - Item 1',
region: 'north', //设置北部区域
collapsible: true,
minHeight: 90
},
{
title: 'west',
html: 'west - Item 2',
region: 'west', //设置西部区域
minWidth: 200,
collapsible: true
},
{
title: 'center',
html: 'center - Item 3 cnblogs cqpanda', //哈哈
region: 'center' //设置中部区域
},
{
title: 'east',
html: 'east - Item 4',
region: 'east', //设置东部区域
minWidth: 200,
collapsible: true
},
{
title: 'south',
html: 'south - Item 5 cqpanda', //哈哈
region: 'south', //设置南部区域
height: 100,
collapsible: true
}
//======================核心代码==============
]
});
ExtJS 布局-Border 布局(Border layout)的更多相关文章
- [Andrew]Ext.Net常用布局(Border布局)
@(Html.X().Window().Width(600).Height(400).Layout(LayoutType.Border) .Items(p => { p.Add(Html ...
- ExtJS 布局-Table布局(Table layout)
更新记录: 2022年6月1日 开始. 2022年6月10日 发布. 1.说明 table布局类似表格,通过指定行列数实现布局. 2.设置布局方法 在父容器中指定 layout: 'table' la ...
- ExtJS 布局-VBox布局(VBox layout)
更新记录: 2022年6月11日 优化文章结构. 2022年6月9日 发布. 2022年6月1日 开始. 1.说明 vbox布局类似auto布局,将子组件一个接一个垂直向下放置,既可以在水平方向也可以 ...
- ExtJS 布局-HBox 布局(HBox layout)
更新记录: 2022年6月11日 更新文章结构. 2022年6月8日 发布. 2022年6月1日 开始. 1.说明 hbox布局与column布局几乎相同,但hbox允许拉伸列的高度. 既可以在水平方 ...
- Extjs面板和布局初探
面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来 ...
- 【ExtJS】简单布局应用
前几天学习了ExtJS的各种布局后,以下就是各种实践,从简单做起. 实现目的: 一个提交表单页,一个显示信息页,表单为个人基本资料输入,显示页为基本信息展示. 内容: 总体布局为border布局,展示 ...
- 【ExtJS】FormPanel 布局(二)
周末2天好好学习了下布局,现在都给实现了吧. 5.border布局: Border布局将容器分为五个区域:north.south.east.west和center.除了center区域外,其他区域都需 ...
- Extjs关于FormPanel布局
Extjs关于FormPanel布局 FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局 ...
- 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
- Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)
[Android布局学习系列] 1.Android 布局学习之--Layout(布局)具体解释一 2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数) ...
随机推荐
- 【代码大全2 学习笔记】ADT 抽象与封装
ADT abstract data type 抽象数据类型 要理解面向对象编程,就要先理解ADT这个概念.不懂ADT的程序员开发出来的类只是名义上的"类"而已--只是单纯的把一些相 ...
- 解决stram++的host代理443端口被占用的问题(电脑有虚拟机进!!)
解决stram++的host代理443端口被占用的问题 一.steam++ 最近在用steam++这个开源且功能强大的加速器,过多就不介绍了 主页地址跳转:Steam++ - 主页 (steampp. ...
- 轻量化安装 TKEStack:让已有 K8s 集群拥有企业级容器云平台的能力
关于我们 更多关于云原生的案例和知识,可关注同名[腾讯云原生]公众号~ 福利: ①公众号后台回复[手册],可获得<腾讯云原生路线图手册>&<腾讯云原生最佳实践>~ ②公 ...
- 鲜为人知帝国CMS内容页调用上一篇和下一篇的精华方法汇总
<span style="float:left">上一篇:[!--info.pre--]</span><span style="float: ...
- BurpSuite下提示embedded browser initialisation failed(嵌入式浏览器初始化失败)的解决方法
BurpSuite可谓是渗透测试过程经常使用的神器之一,但使用中经常会碰到奇奇怪怪的问题,比如有时抓http包,发送到Repeater(中继器,也叫重发器)模块后,在右边Render模块下,却无法看到 ...
- Java语言学习day11--7月10日
今日内容介绍1.自定义类型的定义及使用2.自定义类的内存图3.ArrayList集合的基本功能4.随机点名器案例及库存案例代码优化 ###01引用数据类型_类 * A: 数据类型 * a: java中 ...
- Java语言学习day30--8月5日
###10String类的其他方法 * A:String类的其他方法 * a: 方法介绍 * int length(): 返回字符串的长度 * String substring(int beginIn ...
- golang内存对齐分析(转载)
问题 type Part1 struct { a bool b int32 c int8 d int64 e byte } 在开始之前,希望你计算一下 Part1 共占用的大小是多少呢? func m ...
- python基础练习题(题目 一个数如果恰好等于它的因子之和,这个数就称为"完数"。例如6=1+2+3.编程找出1000以内的所有完数)
day12 --------------------------------------------------------------- 实例019:完数 题目 一个数如果恰好等于它的因子之和,这个 ...
- Ubuntu 下 Mariadb 数据库的安装和目录迁移
Ubuntu 下 Mariadb 数据库的安装和目录迁移 1.简介 本文主要是 Ubuntu 下 Mariadb 数据库的安装和目录迁移,同样适用于 Debian 系统:Ubuntu 20.0.4 M ...