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

推荐阅读

config
如何自行分析定位SAP BSP错误

The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ... [详细]

蜡笔小新 2023-12-14 19:58:05
text
Web学习历程记录（七）——Tomcat基本概念和配置

本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ... [详细]

蜡笔小新 2023-12-13 17:08:24
hash
PHP调用实现波场交互[支持TRX/TRC20]的开发包

本文介绍了一个适用于PHP应用快速接入TRX和TRC20数字资产的开发包，该开发包支持使用自有Tron区块链节点的应用场景，也支持基于Tron官方公共API服务的轻量级部署场景。提供的功能包括生成地址、验证地址、查询余额、交易转账、查询最新区块和查询交易信息等。详细信息可参考tron-php的Github地址：https://github.com/Fenguoz/tron-php。 ... [详细]

蜡笔小新 2023-12-11 17:02:09
jar
Jboss的EJB部署描述符standardjaws.xml配置步骤详解

本文详细介绍了Jboss的EJB部署描述符standardjaws.xml的配置步骤，包括映射CMP实体EJB、数据源连接池的获取以及数据库配置等内容。 ... [详细]

蜡笔小新 2023-12-09 18:15:53
text
Java图形化计算器设计与实现

本文介绍了使用Java编程语言设计和实现图形化计算器的方法。通过使用swing包和awt包中的组件，作者创建了一个具有按钮监听器和自定义界面尺寸和布局的计算器。文章还分享了在图形化界面设计中的一些心得体会。 ... [详细]

蜡笔小新 2023-12-09 10:00:26
io
使用网络构建复杂布局超实用的技巧，赶紧收藏吧

前端开发工程师必读书籍有哪些值得推荐？我们直接进入代码复杂版式设置，如下所示，先写些标签，源码在这个链接里面：https://codepen.io/Shadid ... [详细]

蜡笔小新 2023-10-17 16:54:47
js
知识图谱——机器大脑中的知识库

本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]

蜡笔小新 2023-12-14 10:06:19
js
switch语句的一些用法及注意事项

本文介绍了使用switch语句时的一些用法和注意事项，包括如何实现"fall through"、default语句的作用、在case语句中定义变量时可能出现的问题以及解决方法。同时也提到了C#严格控制switch分支不允许贯穿的规定。通过本文的介绍，读者可以更好地理解和使用switch语句。 ... [详细]

蜡笔小新 2023-12-13 14:47:39
text
深入理解CSS中的margin属性及其应用场景

本文主要介绍了CSS中的margin属性及其应用场景，包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念，读者可以更好地掌握margin的用法和原理。同时，文中提供了一些相关的文档和规范供读者参考。 ... [详细]

蜡笔小新 2023-12-12 18:01:10
get
引擎之旅 Chapter.2 线程库

预备知识可参考我整理的博客Windows编程之线程:https:www.cnblogs.comZhuSenlinp16662075.htmlWindows编程之线程同步:https ... [详细]

蜡笔小新 2023-12-12 14:06:39
hash
to_a和to_ary有什么区别？ - What's the difference between to_a and to_ary?

Whatsthedifferencebetweento_aandto_ary?to_a和to_ary有什么区别？ ... [详细]

蜡笔小新 2023-12-11 19:30:04
text
在Mac上使用Pillow加载不同字体的示例

本文介绍了如何在Mac上使用Pillow库加载不同于默认字体和大小的字体，并提供了一个简单的示例代码。通过该示例，读者可以了解如何在Python中使用Pillow库来写入不同字体的文本。同时，本文也解决了在Mac上使用Pillow库加载字体时可能遇到的问题。读者可以根据本文提供的示例代码，轻松实现在Mac上使用Pillow库加载不同字体的功能。 ... [详细]

蜡笔小新 2023-12-11 18:33:06
text
《JavaScript高等顺序设计》进修笔记：JavaScript中的事宜流和事宜处置惩罚顺序

JavaScript和HTML之间的交互是经由过程事宜完成的。事宜：文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器（或处置惩罚递次来预订事宜），以便事宜发作时实行相应的 ... [详细]

蜡笔小新 2023-12-11 11:40:52
config
SpringBoot整合SpringSecurity+JWT实现单点登录

SpringBoot整合SpringSecurity+JWT实现单点登录,Go语言社区,Golang程序员人脉社 ... [详细]

蜡笔小新 2023-12-11 08:21:41
io
Python的参数解析argparse模块的学习

本文介绍了Python中参数解析的重要模块argparse的学习内容。包括位置参数和可选参数的定义和使用方式，以及add_argument()函数的详细参数关键字解释。同时还介绍了命令行参数的操作和可接受数量的设置，其中包括整数类型的参数。通过学习本文内容，可以更好地理解和使用argparse模块进行参数解析。 ... [详细]

蜡笔小新 2023-12-09 21:59:04

寺儿沟小晨晨

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

Tags | 热门标签

RankList | 热门文章