zoukankan      html  css  js  c++  java

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

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

     

    垂直盒子布局的结构

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

       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属性。
        • 

      

      • 

    


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

    image
    


    这里有个小技巧，父容器设置了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>
    

    



    image
    


    垂直盒子布局示例二
    

    

       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>
    

    



    image
    


    垂直盒子布局示例三
    

    

       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>
    

     
    

    


    image
    



    水平盒子布局的结构
    

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

    

    

    

    

       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>
    

    

    

    

    

    





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


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

    image
    


    水平盒子布局示例一
    

    

       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>
    

     
    

    


    image
    


    水平盒子布局示例二
    

    

       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>
    

     
    

    


    image
    


    水平盒子布局示例三
    

    

       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>
    

     
    

    


    image
    



    太棒了太棒了太棒了
    

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

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

    image_thumb8_thumb
    

    当时我们提到需要为下面的表格设置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>
    

    


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



    太棒了太棒了太棒了
    

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

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

    image_thumb13[3]
    


    为了实现各列之间的间隔，我们需要为列容器设置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秘密花园》系列文章由三生石上原创，博客园首发，转载请注明出处。文章目录 官方论坛
    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  systemctl
                    
    防火墙firewalld
                    
    k8s 基础概念
                    
    进程
                    
    模板问题
                    
    自动发现
                    
    oracle操作
                    
    aix 10代oracle zabbix2.4.4 日志监控
                    
    paramiko
                    
    test
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/sanshi/p/2689978.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看