更新记录:

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)的更多相关文章

  1. [Andrew]Ext.Net常用布局(Border布局)

    @(Html.X().Window().Width(600).Height(400).Layout(LayoutType.Border) .Items(p => {     p.Add(Html ...

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

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

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

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

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

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

  5. Extjs面板和布局初探

    面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上.ExtJS通过提供多种布局类来 ...

  6. 【ExtJS】简单布局应用

    前几天学习了ExtJS的各种布局后,以下就是各种实践,从简单做起. 实现目的: 一个提交表单页,一个显示信息页,表单为个人基本资料输入,显示页为基本信息展示. 内容: 总体布局为border布局,展示 ...

  7. 【ExtJS】FormPanel 布局(二)

    周末2天好好学习了下布局,现在都给实现了吧. 5.border布局: Border布局将容器分为五个区域:north.south.east.west和center.除了center区域外,其他区域都需 ...

  8. Extjs关于FormPanel布局

    Extjs关于FormPanel布局 FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局 ...

  9. 如何在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 ...

  10. Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)

     [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   ...

随机推荐

  1. 【代码大全2 学习笔记】ADT 抽象与封装

    ADT abstract data type 抽象数据类型 要理解面向对象编程,就要先理解ADT这个概念.不懂ADT的程序员开发出来的类只是名义上的"类"而已--只是单纯的把一些相 ...

  2. 解决stram++的host代理443端口被占用的问题(电脑有虚拟机进!!)

    解决stram++的host代理443端口被占用的问题 一.steam++ 最近在用steam++这个开源且功能强大的加速器,过多就不介绍了 主页地址跳转:Steam++ - 主页 (steampp. ...

  3. 轻量化安装 TKEStack:让已有 K8s 集群拥有企业级容器云平台的能力

    关于我们 更多关于云原生的案例和知识,可关注同名[腾讯云原生]公众号~ 福利: ①公众号后台回复[手册],可获得<腾讯云原生路线图手册>&<腾讯云原生最佳实践>~ ②公 ...

  4. 鲜为人知帝国CMS内容页调用上一篇和下一篇的精华方法汇总

    <span style="float:left">上一篇:[!--info.pre--]</span><span style="float: ...

  5. BurpSuite下提示embedded browser initialisation failed(嵌入式浏览器初始化失败)的解决方法

    BurpSuite可谓是渗透测试过程经常使用的神器之一,但使用中经常会碰到奇奇怪怪的问题,比如有时抓http包,发送到Repeater(中继器,也叫重发器)模块后,在右边Render模块下,却无法看到 ...

  6. Java语言学习day11--7月10日

    今日内容介绍1.自定义类型的定义及使用2.自定义类的内存图3.ArrayList集合的基本功能4.随机点名器案例及库存案例代码优化 ###01引用数据类型_类 * A: 数据类型 * a: java中 ...

  7. Java语言学习day30--8月5日

    ###10String类的其他方法 * A:String类的其他方法 * a: 方法介绍 * int length(): 返回字符串的长度 * String substring(int beginIn ...

  8. golang内存对齐分析(转载)

    问题 type Part1 struct { a bool b int32 c int8 d int64 e byte } 在开始之前,希望你计算一下 Part1 共占用的大小是多少呢? func m ...

  9. python基础练习题(题目 一个数如果恰好等于它的因子之和,这个数就称为"完数"。例如6=1+2+3.编程找出1000以内的所有完数)

    day12 --------------------------------------------------------------- 实例019:完数 题目 一个数如果恰好等于它的因子之和,这个 ...

  10. Ubuntu 下 Mariadb 数据库的安装和目录迁移

    Ubuntu 下 Mariadb 数据库的安装和目录迁移 1.简介 本文主要是 Ubuntu 下 Mariadb 数据库的安装和目录迁移,同样适用于 Debian 系统:Ubuntu 20.0.4 M ...