[原创]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秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录官方论坛

推荐阅读

ip
通过Web界面管理Linux日志的解决方案

本指南介绍了一种利用rsyslog、MariaDB和LogAnalyzer搭建集中式日志管理平台的方法，使用户可以通过Web界面查看和分析Linux系统的日志记录。此方案不仅适用于服务器环境，还提供了详细的步骤来确保系统的稳定性和安全性。 ... [详细]

蜡笔小新 2024-12-24 17:11:38
ip
构建个人博客站点：基于LAMP环境的WordPress部署指南

本文详细介绍如何利用已搭建的LAMP（Linux、Apache、MySQL、PHP）环境，快速创建一个基于WordPress的内容管理系统（CMS）。WordPress是一款流行的开源博客平台，适用于个人或小型团队使用。 ... [详细]

蜡笔小新 2024-12-23 20:23:57
ip
深入解析JDBC源码

本文详细探讨了JDBC（Java数据库连接）的内部机制，重点分析其作为服务提供者接口（SPI）框架的应用。通过类图和代码示例，展示了JDBC如何注册驱动程序、建立数据库连接以及执行SQL查询的过程。 ... [详细]

蜡笔小新 2024-12-25 19:59:15
range
基于KVM的SRIOV直通配置及性能测试

SRIOV介绍、VF直通配置，以及包转发率性能测试小慢哥的原创文章，欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]

蜡笔小新 2024-12-25 19:26:39
int
深入解析 Apache Shiro 安全框架架构

本文详细介绍了 Apache Shiro，一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作，使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API，同时确保高度的安全性和灵活性。 ... [详细]

蜡笔小新 2024-12-25 16:03:57
ip
优化局域网SSH连接延迟问题的解决方案

本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置，可以显著缩短SSH连接的时间。 ... [详细]

蜡笔小新 2024-12-25 11:31:48
main
ASP.NET Core 3.1 中的Startup类

Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类，按照约定命名为 Startup。 Startup 类：可选择性地包括 ... [详细]

蜡笔小新 2024-12-25 02:13:25
int
HTTP请求与响应机制详解

本文深入探讨了HTTP请求和响应对象的使用，详细介绍了如何通过响应对象向客户端发送数据、处理中文乱码问题以及常见的HTTP状态码。此外，还涵盖了文件下载、请求重定向、请求转发等高级功能。 ... [详细]

蜡笔小新 2024-12-23 20:40:08
ip
采用IKE方式建立IPsec安全隧道

一、【组网和实验环境】按如上的接口ip先作配置，再作ipsec的相关配置，配置文本见文章最后本文实验采用的交换机是H3C模拟器，下载地址如 ... [详细]

蜡笔小新 2024-12-22 20:24:15
ip
解决编译BSP包时遇到的 'gets' 未声明错误

在编译BSP包过程中，遇到了一个与 'gets' 函数相关的编译错误。该问题通常发生在较新的编译环境中，由于 'gets' 函数已被弃用并视为安全漏洞。本文将详细介绍如何通过修改源代码和配置文件来解决这一问题。 ... [详细]

蜡笔小新 2024-12-21 11:21:05
ip
无屏幕环境下树莓派4B的安装与配置指南

本文将详细介绍如何在没有显示器的情况下，使用Raspberry Pi Imager为树莓派4B安装操作系统，并进行基本配置，包括设置SSH、WiFi连接以及更新软件源。 ... [详细]

蜡笔小新 2024-12-21 08:14:50
spring
SpringMVC RestTemplate的几种请求调用(转)

SpringMVCRestTemplate的几种请求调用(转),Go语言社区,Golang程序员人脉社 ... [详细]

蜡笔小新 2024-12-20 19:05:12
ip
实体映射最强工具类：MapStruct真香

实体映射最强工具类：MapStruct真香 ... [详细]

蜡笔小新 2024-12-25 16:22:17
ip
华为ENSP模拟器指令详解：计算机网络实验指南

本文详细解释了华为ENSP模拟器中常用的命令，涵盖用户模式、系统模式、接口模式和地址池视图模式下的操作。这些命令对于进行计算机网络实验至关重要，帮助用户更好地理解和配置路由器及PC机的通信。 ... [详细]

蜡笔小新 2024-12-24 16:05:09
ip
利用决策树预测NBA比赛胜负的Python数据挖掘实践

本文通过使用2013-14赛季NBA赛程与结果数据集以及2013年NBA排名数据，结合《Python数据挖掘入门与实践》一书中的方法，展示如何应用决策树算法进行比赛胜负预测。我们将详细讲解数据预处理、特征工程及模型评估等关键步骤。 ... [详细]

蜡笔小新 2024-12-23 09:07:40

寺儿沟小晨晨

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

Tags | 热门标签

RankList | 热门文章