基于Extjs的web表单设计器第六节基于Extjs的web表单设计器基于Extjs的web表单设计器第一节基于Extjs的web表单设计器第二节——表单控件设计基于Extjs的web表单设计器第三节——控件拖放基于Extjs的web表单设计器第四节——控件拖放基于Extjs的web表单设计器第五节——数据库设计基于Extjs的web表单设计器第六节——界面框架设计基于Extjs的web表单设计器第七节——取数公式设计基于Extjs的web表单设计器第八节——表单引擎设计这一节我给大家介绍一下表单设计器的界面框架设计（这一节距上一节时间有点长了，还望见谅）。
这一节的内容比较简单，主要是结合表单设计器的实际情况介绍一些ext前端界面布局、设计的方式，熟悉ext框架或者常用控件布局的人可以略过。
我们使用的前端框架是Ext，因此表单设计器的前端界面设计都是基于Ext展开。
设计器的总体设计方案为：1.打开设计器后第一层级展现的是目前已有的模板列表信息的一个grid，grid中包含了当前登录所具有操作表单模板的权限。
如（新增模板，编辑模板，发布模板，删除模板，停用模板等功能.）2.选择“新增模板”后，在填出的界面填入必要的模板信息然后“确定”后就会进入设计时界面；此时的设计时界面将会为我们产生一个全新的表单模板画布区域，等待你的设计；3.选中现有的某个模板点击“编辑模板”后，同样会进入设计时界面；此时的设计时界面将会为我们加载并生产该模板已有的表单区域及表单项信息；4.其他操作都不会进入我们的设计时界面；5.设计时界面采用类似Visual Studio 的设计器界面，主要分为左、中、右三个区域。
左侧为控件区域、中间为表单的画布设区域、右侧为属性区域（具体可以参考本系列的开篇的图样）。
基于上面的设计方案，在Ext我们可以采用这样的界面布局方式，第一级panel使用cardlayout，包含一个已有模板列表的grid和另外一个设计时的panel，设计时panel采用左中右的布局方式我们一般使用borderLayout来完成布局。
1 <ext:Panel runat="server" Border="false"Layout="CardLayout" Padding="5" ActiveIndex="0">2 <Items>3 <ext:GridPanel ID="GridPanel1" Title="现有表单模板列表" runat="server">4 <%--其他信息略..--%>5 </ext:GridPanel>6 <ext:Panel runat="server"Border="false" Layout="BorderLayout">7 <Items>8 <ext:TreePanel runat="server" Region="West" RootVisible="false"9 Width="200" Split="true" Collapsible="true" Collapsed="false">10 </ext:TreePanel>11 <ext:Panel ID="Panel2"runat="server" Region="Center" ButtonAlign="Center" Border="true"12 BodyPadding="10" OverflowY="Auto">13 </ext:Panel>14 <ext:Panel ID="Panel3"runat="server" Border="false" Region="East" Width="260"15 AutoScroll="true" Title="控件属性" Split="true" Collapsible="true" Collapsed="false"16Layout="ColumnLayout">17 </ext:Panel>18 </Items>19 </ext:Panel>20 </Items>21 </ext:Panel>设计界面左侧的控件区域我们也在本系列的第二节进行了介绍，这里不再重复，有兴趣的朋友可以去参考第二节——表单控件的设计。
这里主要介绍画布区域和右侧的属性区域。
画布区域就是一个能够接受卡片区域、表格区域及混合区域的控件。
根据前面第二节的表单控件设计一节的介绍，我们其实很容易的就知道了，画布区域其实就是一个混合区域（mixed）类型的panel。
因此上面总体布局代码中的Panel2的代码我们应该修改为：1 <ext:Panel ID="mainPanel" runat="server"Region="Center" ButtonAlign="Center" Border="true"2 BodyPadding="10"OverflowY="Auto">3 <CustomConfig>4 <ext:ConfigItem Name="type" Value="mixed" Mode="Value" />5 </CustomConfig>6 <TopBar>7 <ext:ToolbarID="templateRegionToolbar" runat="server">8 <Items>9 <ext:Button ID="btnEditTemplateJs" runat="server" Text="编辑模板JS 方法" Icon="Pencil">10<Listeners>11<Click Handler="EditTemplateJS(tempJsWin)" />12</Listeners>13</ext:Button>14<ext:ToolbarSeparator ID="ToolbarSeparator1"runat="server" />15 <ext:Button runat="server" ID="btnSaveTplInfo" Icon="Disk" Text="保存模板">16<Listeners>17<Click Handler="SaveTemplateInfo()" />18</Listeners>19</ext:Button>20<ext:ToolbarSeparator ID="ToolbarSeparator8"runat="server" />21 <ext:Button runat="server" ID="btnCancelTplInfo" Icon="Cancel"Text="取消">22<Listeners>23<Click Fn="CancelTplInfo" />24</Listeners>25</ext:Button>26 </Items>27 </ext:Toolbar>28 </TopBar>29 </ext:Panel>介绍完画布区域，就是我们的属性区域设计。
属性区域设计的内容项可能比较多一些，主要是我们要针对表单模板、表单区域、不同类型区域的表单项等内容项设置相关的属性（因为我们的卡片区域和表格区域里面即使都是同一种控件类型，可能所拥有的属性值也不一样，这里列举两个例子1.比如表格区域里面的控件可以具有子级列或者父级列；表格区域里面的数字或者金额控件可以具有选择不同的汇总方式，而我们的卡片区域的子控件是不具有这些属性的；2.卡片区域的子控件都具有占用几列的属性而我们的表格区域的子控件对应的却是实际占用列宽度的属性）。
为了考虑到职责的单一性，以及后期维护修改的简易性，我们考虑针对这几种不同的内容项的属性分别定义各自的功能属性，即使这些控件属性中有些是重复的属性，我们也会使用单独的控件来标记它们，而不是为了节省一个控件而去复用它们。