FineUI页面布局

科技前沿 • 2025-02-14 15:59 • 阅读 49

大家好，我是讯享网，很高兴认识大家。

相对于为控件设置固定的宽度和高度，布局的重要意义在于子控件可以根据父控件的尺寸自动设置自己的尺寸，在页面尺寸改变时同样有效。如果你在项目中遇到类似如下的需求，就需要考虑布局了：

凡是容器控件都可以参与布局，FineUI中很多控件都是从Container中继承下来的。这个从官方文档中可以明显看得出来。

FineUI中有很多布局，通过Layout枚举类型我们可以清楚的看到这些布局类型。

从上图可以看出，很多布局类型以控件的形式表现出来，比如RegionPanel、Accordion、Form和SimpleForm以及TabStrip控件，这些控件会有单独的篇幅介绍，这里只介绍可以用于所有容器控件的布局类型。

让整个容器填充整个页面是一个常见需求，实现起来也很方便。设置PageManager的AutoSizePanelID为需要填充整个页面的容器控件ID。

让一个控件充满另一个容器控件也是一个常见的需求，此时只需要为父容器控件设置Layout属性为Fit即可。

从上图可以看出，这个首页分别使用了如下布局相关知识：

通过PageManager的AutoSizePanelID属性将RegionPanel控件充满整个页面空间；
RegionPanel控件用来提供“上-左-中”的布局；
RegionPanel中的三个Region控件分别应用Layout=Fit，来使其内部的控件（分别为ContentPanel，Tree，TabStrip）填充整个Region。

下面来看下简化后的代码结构：

 1: <ext:PageManager AutoSizePanelID="RegionPanel1" >

讯享网 2: </ext:PageManager>

 3: <ext:RegionPanel ID="RegionPanel1">

讯享网 4:  <ext:Region Position="Top" Layout="Fit">

 5:  <Toolbars>

讯享网 6:  <ext:Toolbar Position="Bottom"></ext:Toolbar>

 7:  </Toolbars>

讯享网 8:  <Items>

 9:  <ext:ContentPanel></ext:ContentPanel>

讯享网 10:  </Items>

 11:  </ext:Region>

讯享网 12:  <ext:Region Position="Left" Layout="Fit">

 13:  <Items>

讯享网 14:  <ext:Tree></ext:Tree>

 15:  </Items>

讯享网 16:  </ext:Region>

 17:  <ext:Region Position="Center" Layout="Fit">

讯享网 18:  <Items>

 19:  <ext:TabStrip>

讯享网 20:  <Tabs>

 21:  <ext:Tab></ext:Tab>

讯享网 22:  <ext:Tab></ext:Tab>

 23:  <ext:Tab></ext:Tab>

讯享网 24:  </Tabs>

 25:  </ext:TabStrip>

讯享网 26:  </Items>

 27:  </ext:Region>

讯享网 28: </ext:RegionPanel>

锚点布局是ExtJS最早推出的几个布局之一，功能强大但相对复杂。本篇文章会详细分析锚点布局。

一个典型的锚点布局的结构如下：

 1: <ext:Panel Layout="Anchor">

讯享网 2:  <Items>

 3:  <ext:Panel AnchorValue="100% 30%"></ext:Panel>

讯享网 4:  <ext:Panel AnchorValue="100% 70%"></ext:Panel>

 5:  </Items>

讯享网 6: </ext:Panel>