[原创]ExtAspNet秘密花园（十四）—布局之垂直盒子布局和水平盒子布局

作者：寺儿沟小晨晨 | 来源：互联网 | 2023-08-27 23:30

垂直盒子布局和水平盒子布局非常灵活易用，在很大程度上能够取代锚点布局，行布局和列布局，因此希望大家能够熟练掌握。垂直盒子布局的结构一个典型的垂直盒子布局的结构如下：1:&

垂直盒子布局和水平盒子布局非常灵活易用，在很大程度上能够取代锚点布局，行布局和列布局，因此希望大家能够熟练掌握。

垂直盒子布局的结构

一个典型的垂直盒子布局的结构如下：

   1:  <ext:Panel Layout="VBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="5"

   2:      BoxConfigChildMargin="0 0 5 0">

   3:      <Items>

   4:          <ext:Panel BoxFlex="1">ext:Panel>

   5:          <ext:Panel Height="100px">ext:Panel>

   6:          <ext:Panel BoxFlex="2" BoxMargin="0">ext:Panel>

   7:      Items>

   8:  ext:Panel>

有如下几个关键点：

为父容器控件设置Layout属性为VBox，还可以设置其他几个属性：
- BoxConfigAlign：用来控制容器子控件的尺寸，有四种取值。
  - Start：所有子控件位于父容器的开始位置（默认值）
  - Center：所有子控件位于父容器的中间位置；
  - Stretch：所有子控件被拉伸至父容器的大小；
  - StretchMax：所有子控件被拉伸至最大子控件的大小。
- BoxConfigPosition：用来控制子容器的位置，有三种取值。
  - Start：子控件靠父容器的开始位置排列（默认值）；
  - End：子控件靠父容器的结束位置排列；
  - Center：子控件靠父容器的中间位置排列；
- BoxConfigChildMargin：每个子容器的外边距。
  - 如果是四个数字组成的字符串，分别表示上边距、右边距、下边距、左边距；
  - 如果是三个数字组成的字符串，分别表示上边距、右边距、下边距，左边距同右边距；
  - 如果是两个数字组成的字符串，分别表示上边距、右边距，左边距同右边距，下边距同上边距；
  - 如果是一个数字组成的字符串，四个方面的边距都为此值。
- BoxConfigPadding：父容器的内边距（规则同上）。
  - 此属性和BodyPadding的作用相同，只不过此时BodyPadding失效了，需要使用此属性设置内边距。
对于需要固定高度的子容器控件，设置Height属性；也可以设置Width属性，其行为取决于父容器BoxConfigAlign属性。
对于需要自适应高度的子容器控件，设置BoxFlex属性（整型值）。
- BoxFlex属性是一个相对值，相对于其他具有BoxFlex属性的子容器。
- 在本例中，第一个子容器BoxFlex=1，第三个子容器BoxFlex=2。所以第一个子容器占据（除去第二个固定高度的子容器）1/3的高度，相应的第三个子容器占据2/3的高度。并且第一个和第三个子容器的高度随着父容器的高度变化而变化。
对于需要自定义外边距的子容器控件，设置BoxMargin属性。
- 这个属性一般用来覆盖父容器的BoxConfigChildMargin属性。

来看下上面结构生成的界面截图：

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

这里有个小技巧，父容器设置了BoxCOnfigChildMargin=0 0 5 0，也即是说每个子容器的下边距为5px，不过最后一个子容器通过BoxMargin=0覆盖了这一属性，从而保证最后一个子容器距离父容器下边界也是5px。

为了让大家对这些属性有更深入的了解，下面通过几个示例来展示。

垂直盒子布局示例一

   1:  <ext:Panel Layout="VBox" BoxConfigAlign="Stretch" BoxConfigPosition="End" BoxConfigPadding="5"

   2:      BoxConfigChildMargin="0 0 5 0">

   3:      <Items>

   4:          <ext:Panel BoxFlex="1">ext:Panel>

   5:          <ext:Panel Height="100px">ext:Panel>

   6:          <ext:Panel BoxFlex="2" BoxMargin="0">ext:Panel>

   7:      Items>

   8:  ext:Panel>

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

垂直盒子布局示例二

   1:  <ext:Panel Layout="VBox" BoxConfigAlign="Start" BoxConfigPosition="Center" BoxConfigPadding="5"

   2:      BoxConfigChildMargin="0 0 5 0">

   3:      <Items>

   4:          <ext:Panel BoxFlex="1">ext:Panel>

   5:          <ext:Panel Height="100px">ext:Panel>

   6:          <ext:Panel BoxFlex="2" BoxMargin="0">ext:Panel>

   7:      Items>

   8:  ext:Panel>

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

垂直盒子布局示例三

   1:  <ext:Panel Layout="VBox" BoxConfigAlign="StretchMax" BoxConfigPosition="Center" BoxConfigPadding="5"

   2:      BoxConfigChildMargin="0 0 5 0">

   3:      <Items>

   4:          <ext:Panel BoxFlex="1">ext:Panel>

   5:          <ext:Panel Height="100px">ext:Panel>

   6:          <ext:Panel BoxFlex="2" BoxMargin="0">ext:Panel>

   7:      Items>

   8:  ext:Panel>

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

水平盒子布局的结构

一个典型的水平盒子布局的结构如下：

   1:  <ext:Panel Layout="HBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="5"

   2:      BoxConfigChildMargin="0 5 0 0">

   3:      <Items>

   4:          <ext:Panel BoxFlex="1">ext:Panel>

   5:          <ext:Panel Width="100px">ext:Panel>

   6:          <ext:Panel BoxFlex="2" BoxMargin="0">ext:Panel>

   7:      Items>

   8:  ext:Panel>

其中参数的含义和垂直盒子布局的类似，这里就不再赘述。

来看下上面结构生成的界面截图：

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

水平盒子布局示例一

   1:  <ext:Panel Layout="HBox" BoxConfigAlign="Stretch" BoxConfigPosition="End" BoxConfigPadding="5"

   2:      BoxConfigChildMargin="0 5 0 0">

   3:      <Items>

   4:          <ext:Panel Width="200px">ext:Panel>

   5:          <ext:Panel Width="200px">ext:Panel>

   6:          <ext:Panel Width="200px" BoxMargin="0">ext:Panel>

   7:      Items>

   8:  ext:Panel>

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

水平盒子布局示例二

   1:  <ext:Panel Layout="HBox" BoxConfigAlign="Center" BoxConfigPosition="Center" BoxConfigPadding="5"

   2:      BoxConfigChildMargin="0 5 0 0">

   3:      <Items>

   4:          <ext:Panel Width="200px" Height="100px">ext:Panel>

   5:          <ext:Panel Width="200px" Height="150px">ext:Panel>

   6:          <ext:Panel Width="200px" Height="200px" BoxMargin="0">ext:Panel>

   7:      Items>

   8:  ext:Panel>

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

水平盒子布局示例三

   1:  <ext:Panel Layout="HBox" BoxConfigAlign="StretchMax" BoxConfigPosition="Center" BoxConfigPadding="5"

   2:      BoxConfigChildMargin="0 5 0 0">

   3:      <Items>

   4:          <ext:Panel Width="200px" Height="100px">ext:Panel>

   5:          <ext:Panel Width="200px" Height="150px">ext:Panel>

   6:          <ext:Panel Width="200px" Height="200px" BoxMargin="0">ext:Panel>

   7:      Items>

   8:  ext:Panel>

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

使用垂直盒子布局替代锚点布局示例

还记得我们在讲解锚点布局时最后一个示例吗？

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

当时我们提到需要为下面的表格设置AnchorValue=”100% -62”，其中62这个数值是通过Firebug查看渲染后的HTML得到的。

这种做法令人有点尴尬，类似莫名其妙的常数也给项目的维护带来一定的麻烦。

下面使用垂直盒子布局来轻松解决这个问题：

   1:  <ext:Panel EnableBackgroundColor="true" Layout="VBox"

   2:      BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="3" BoxConfigChildMargin="0"

   3:      ShowBorder="True" ShowHeader="True" Width="750px" Height="350px" >

   4:      <Items>

   5:          <ext:Form ShowBorder="False" BodyPadding="5px" EnableBackgroundColor="true" ShowHeader="False">

   6:              <Rows>

   7:                  <ext:FormRow>

   8:                      <Items>

   9:                          // 此处省略...

  10:                      Items>

  11:                  ext:FormRow>

  12:                  <ext:FormRow>

  13:                      <Items>

  14:                          // 此处省略...

  15:                      Items>

  16:                  ext:FormRow>

  17:              Rows>

  18:          ext:Form>

  19:          <ext:Panel ShowBorder="True" ShowHeader="false" BoxFlex="1" Layout="Fit">

  20:              <Toolbars>

  21:                  <ext:Toolbar ID="Toolbar3">

  22:                      <Items>

  23:                          // 此处省略...

  24:                      Items>

  25:                  ext:Toolbar>

  26:              Toolbars>

  27:              <Items>

  28:                  <ext:Grid Title="Grid3" PageSize="3" ShowBorder="false" ShowHeader="False"

  29:                      EnableCheckBoxSelect="True" DataKeyNames="Id,Name" EnableRowNumber="True">

  30:                      <Columns>

  31:                          // 此处省略...

  32:                      Columns>

  33:                  ext:Grid>

  34:              Items>

  35:          ext:Panel>

  36:      Items>

  37:  ext:Panel>

使用垂直盒子布局避免了锚点布局时引入的常数，同时产生的界面效果和之前的一模一样。

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

使用水平盒子布局替代列布局示例

还记得我们在讲解列布局时最后一个示例吗？

[原创]ExtAspNet秘密花园（十四） — 布局之垂直盒子布局和水平盒子布局

为了实现各列之间的间隔，我们需要为列容器设置CssClass="columnpanel"，其中columnpanel是预先定义的CSS类。

而使用水平盒子布局，ASPX标签将更加简单直观：

   1:  <ext:Panel Height="350px" Width="750px" Layout="HBox" BoxConfigAlign="Stretch"

   2:      BoxConfigPosition="Start" BoxConfigPadding="5" BoxConfigChildMargin="0 5 0 0">

   3:      <Items>

   4:          <ext:Panel BoxFlex="1" ShowBorder="false" ShowHeader="false">

   5:              <Items>

   6:                  <ext:Panel Height="150px" CssClass="rowpanel" BodyPadding="5px">ext:Panel>

   7:                  <ext:Panel Height="100px" BodyPadding="5px">ext:Panel>

   8:              Items>

   9:          ext:Panel>

  10:          <ext:Panel BoxFlex="1" BoxMargin="0" ShowBorder="false" ShowHeader="false">

  11:              <Items>

  12:                  <ext:Panel Height="100px" CssClass="rowpanel" BodyPadding="5px">ext:Panel>

  13:                  <ext:Panel Height="150px" BodyPadding="5px">ext:Panel>

  14:              Items>

  15:          ext:Panel>

  16:      Items>

  17:  ext:Panel>

小结

垂直盒子布局和水平盒子布局非常灵活，在实际项目中出镜率也很高，在某些情况甚至可以取代锚点布局、列布局等其他布局，因此需要大家熟练掌握。关于布局就先介绍到这里，剩下的绝对定位布局和表格布局相对简单，大家可以仿照官方示例自己学习。

接下来，我们将学习ExtAspNet的重头戏 - 数据表格控件。

注：《ExtAspNet秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录官方论坛

推荐阅读

tree
egg实现登录鉴权（七）：权限管理

权限管理包含三部分：访问页面的权限，操作功能的权限和获取数据权限。页面权限：登录用户所属角色的可访问页面的权限功能权限：登录用户所属角色的可访问页面的操作权限数据权限：登录用户所属 ... [详细]

蜡笔小新 2024-11-23 16:30:15
import
利用Scrapy构建的数据采集与分析可视化系统

本文探讨了如何使用Scrapy框架构建高效的数据采集系统，以及如何通过异步处理技术提升数据存储的效率。同时，文章还介绍了针对不同网站采用的不同采集策略。 ... [详细]

蜡笔小新 2024-11-23 16:56:38
rsa
实现Win10与Linux服务器的SSH无密码登录

本文介绍了如何在Windows 10环境下使用Git工具，通过配置SSH密钥对，实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]

蜡笔小新 2024-11-23 15:50:03
main
嵌入式系统实验：GPIO控制与按键响应

本报告记录了嵌入式软件设计课程中的第二次实验，主要探讨了使用KEIL V5开发环境和ST固件库进行GPIO控制及按键响应编程的方法。通过实际操作，加深了对嵌入式系统硬件接口编程的理解。 ... [详细]

蜡笔小新 2024-11-23 13:00:00
less
全面覆盖的前端技术资源大全

本文提供了一个详尽的前端开发资源列表，涵盖了从基础入门到高级应用的各个方面，包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]

蜡笔小新 2024-11-23 12:05:53
less
物理隔离环境下的数据交换平台挑战与解决方案（上）

本文探讨了在一个物理隔离的环境中构建数据交换平台所面临的挑战，包括但不限于数据加密、传输监控及确保文件交换的安全性和可靠性。同时，作者结合自身项目经验，分享了项目规划、实施过程中的关键决策及其背后的思考。 ... [详细]

蜡笔小新 2024-11-20 18:18:23
import
使用Echarts for Weixin 小程序实现中国地图及区域点击事件

本文介绍了如何使用Echarts for Weixin在微信小程序中构建中国地图，并实现区域点击事件。包括效果展示、条件准备和逻辑实现的具体步骤。 ... [详细]

蜡笔小新 2024-11-18 19:37:06
import
如何在DedeCMS专题页节点文档中调用自定义模型字段？

在完成DedeCMS专题页节点文章列表样式的修改后，如果需要在列表中显示自定义模型的字段，由于DedeCMS默认不支持这一功能，因此需要进行一些二次开发。本文将详细介绍如何通过修改模板文件和核心文件来实现这一需求。 ... [详细]

蜡笔小新 2024-11-16 21:23:49
import
Excel VBA自动化添加数字证书（续）

本文继续探讨如何在Excel VBA中自动添加数字证书。上一篇文章因突发情况未能完成，本次将详细介绍证书的生成和集成方法。 ... [详细]

蜡笔小新 2024-11-16 17:18:24
ip
MyBatisCodeHelperPro 2.9.3 最新在线免费激活方法

MyBatisCodeHelperPro 2.9.3 是一款强大的代码生成工具，适用于多种开发环境。本文将介绍如何在线免费激活该工具，帮助开发者提高工作效率。 ... [详细]

蜡笔小新 2024-11-16 16:26:02
ip
Java EE 平台的 13 种核心技术

Java EE 平台集成了多种服务、API 和协议，旨在支持基于 Web 的多层应用程序开发。本文将详细介绍 Java EE 中的 13 种关键技术规范，帮助开发者更好地理解和应用这些技术。 ... [详细]

蜡笔小新 2024-11-15 21:15:35
ip
微服务优雅上下线的最佳实践

本文介绍了微服务上下线的正确姿势，避免使用 kill -9 等粗暴手段，确保服务的稳定性和可靠性。 ... [详细]

蜡笔小新 2024-11-14 16:22:57
ip
Java代码分层详解及其应用场景

本文详细介绍了Java代码分层的基本概念和常见分层模式，特别是MVC模式。同时探讨了不同项目需求下的分层策略，帮助读者更好地理解和应用Java分层思想。 ... [详细]

蜡笔小新 2024-11-13 17:03:49
ip
2017年软件开发领域的七大变革

随着技术的不断进步，2017年对软件开发人员而言将充满挑战与机遇。本文探讨了开发人员需要适应的七个关键变化，包括人工智能、聊天机器人、容器技术、应用程序版本控制、云测试环境、大众开发者崛起以及系统管理的云迁移。 ... [详细]

蜡笔小新 2024-11-19 20:17:20
import
自然语言处理(NLP)——LDA模型:对电商购物评论进行情感分析

目录一、2020数学建模美赛C题简介需求评价内容提供数据二、解题思路三、LDA简介四、代码实现1.数据预处理1.1剔除无用信息1.1.1剔除掉不需要的列1.1.2找出无效评论并剔除 ... [详细]

蜡笔小新 2024-11-14 18:21:21

寺儿沟小晨晨

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章