基於Extjs的web表單設計器第六節——界面框架設計

本文轉載自查看原文 2015-04-06 17:38 3299 隨筆/ 設計器/ extjs/ 表單/ 表單設計器/ Asp.Net

基於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"
16                         Layout="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:Toolbar ID="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.卡片區域的子控件都具有占用幾列的屬性而我們的表格區域的子控件對應的卻是實際占用列寬度的屬性）。為了考慮到職責的單一性，以及后期維護修改的簡易性，我們考慮針對這幾種不同的內容項的屬性分別定義各自的功能屬性，即使這些控件屬性中有些是重復的屬性，我們也會使用單獨的控件來標記它們，而不是為了節省一個控件而去復用它們。

　　因此，根據上面的思路我們的屬性區域應該分成4個大的獨立的界面。

　　1.設置表單模板屬性的view（主要是設置表單模板的一些信息，比如修改模板名稱以及備注信息等）

　　2.設置區域控件屬性的view（主要是設置卡片區域、表格區域、混合區域等區域控件的屬性）

　　3.設置卡片區域子控件屬性的view（主要是用來設置卡片區域里面的子控件的屬性）

　　4.設置表格區域子控件屬性的view（主要是用來設置表格區域里面的子控件的屬性）

　　這里給出屬性區域的示例代碼，注意有些事件的方法還在整理中並沒有給出來，示例代碼僅供參考。

  1  <ext:Panel ID="propertyPanel" runat="server" ActiveIndex="0" Border="false" Layout="CardLayout"
  2                                         ColumnWidth="1">
  3                                         <TopBar>
  4                                             <ext:Toolbar ID="Toolbar2" runat="server">
  5                                                 <Items>
  6                                                     <ext:Button runat="server" ID="btnAcceptProperty" Text="確 定" Icon="Accept">
  7                                                         <Listeners>
  8                                                             <Click Fn="SetControlProperty" />
  9                                                         </Listeners>
 10                                                     </ext:Button>
 11                                                 </Items>
 12                                             </ext:Toolbar>
 13                                         </TopBar>
 14                                         <Items>
 15                                             <ext:FormPanel ID="regionProperty" runat="server" Border="false" Layout="FormLayout"
 16                                                 BodyPadding="5">
 17                                                 <CustomConfig>
 18                                                     <ext:ConfigItem Name="type" Value="region" />
 19                                                 </CustomConfig>
 20                                                 <Defaults>
 21                                                     <ext:Parameter Name="labelAlign" Value="left" />
 22                                                     <ext:Parameter Name="labelWidth" Value="60" Mode="Raw" />
 23                                                 </Defaults>
 24                                                 <Items>
 25                                                     <ext:Hidden ID="rGroupId" FieldLabel="分組ID" runat="server" />
 26                                                     <ext:Hidden ID="rGroupType" FieldLabel="類型" runat="server" />
 27                                                     <ext:DisplayField ID="rTypeName" FieldLabel="類型名稱" runat="server" />
 28                                                     <ext:DisplayField runat="server" ID="rParentGroupName" FieldLabel="所屬分組名稱" LabelWidth="80" />
 29                                                     <ext:TextField ID="rGroupName" FieldLabel="區域名稱" runat="server" />
 30                                                     <ext:NumberField ID="rGroupOrder" FieldLabel="排 序" runat="server" MinValue="1" AllowDecimals="false" />
 31                                                     <ext:NumberField ID="rGroupCols" FieldLabel="區域列數" runat="server" MinValue="1" Text="1"
 32                                                         AllowDecimals="false" />
 33                                                     <ext:CheckboxGroup ID="CheckboxGroup1" runat="server">
 34                                                         <Items>
 35                                                             <ext:Checkbox ID="rShowGroupName" BoxLabel="顯示標題" runat="server" />
 36                                                             <ext:Checkbox ID="rShowBorder" BoxLabel="顯示邊框" runat="server" Checked="true" />
 37                                                         </Items>
 38                                                     </ext:CheckboxGroup>
 39                                                 </Items>
 40                                             </ext:FormPanel>
 41                                             <ext:FormPanel ID="cardControlProperty" runat="server" Border="false" Layout="FormLayout"
 42                                                 BodyPadding="5">
 43                                                 <CustomConfig>
 44                                                     <ext:ConfigItem Name="type" Value="control" />
 45                                                 </CustomConfig>
 46                                                 <Defaults>
 47                                                     <ext:Parameter Name="labelAlign" Value="left" />
 48                                                     <ext:Parameter Name="labelWidth" Value="60" Mode="Raw" />
 49                                                 </Defaults>
 50                                                 <Items>
 51                                                     <ext:DisplayField ID="cTypeName" FieldLabel="類型" runat="server" />
 52                                                     <ext:Hidden runat="server" ID="cGroupId" FieldLabel="分組Id" />
 53                                                     <ext:DisplayField runat="server" ID="cGroupName" FieldLabel="所屬分組" />
 54                                                     <ext:TextField ID="cDisplayName" FieldLabel="控件名稱" runat="server" MaxLength="8" />
 55                                                     <ext:NumberField ID="cColSpan" FieldLabel="占用列數" runat="server" MinValue="1" Text="1"
 56                                                         AllowDecimals="false" />
 57                                                     <ext:TextField ID="cDefaultValue" FieldLabel="默認值" runat="server" Hidden="true" />
 58                                                     <ext:CheckboxGroup ID="CheckboxGroup2" runat="server">
 59                                                         <Items>
 60                                                             <ext:Checkbox runat="server" ID="cIsReadOnly" BoxLabel="只讀" />
 61                                                             <ext:Checkbox runat="server" ID="cIsHide" BoxLabel="隱藏" />
 62                                                         </Items>
 63                                                     </ext:CheckboxGroup>
 64                                                 </Items>
 65                                             </ext:FormPanel>
 66                                             <ext:FormPanel ID="tableControlProperty" runat="server" Border="false" Layout="FormLayout"
 67                                                 BodyPadding="5">
 68                                                 <CustomConfig>
 69                                                     <ext:ConfigItem Name="type" Value="table" />
 70                                                 </CustomConfig>
 71                                                 <Defaults>
 72                                                     <ext:Parameter Name="labelAlign" Value="left" />
 73                                                     <ext:Parameter Name="labelWidth" Value="60" Mode="Raw" />
 74                                                 </Defaults>
 75                                                 <Items>
 76                                                     <ext:DisplayField ID="tTypeName" FieldLabel="類型" runat="server" />
 77                                                     <ext:Hidden runat="server" ID="tGroupId" FieldLabel="分組Id" />
 78                                                     <ext:DisplayField ID="tGroupName" runat="server" FieldLabel="所屬分組" />
 79                                                     <ext:TextField ID="tDisplayName" FieldLabel="列名稱" runat="server" />
 80                                                     <ext:NumberField ID="tWidth" FieldLabel="列寬" runat="server" MinValue="100" AllowDecimals="false" />
 81                                                     <ext:RadioGroup ID="tAlign" runat="server" FieldLabel="列對齊">
 82                                                         <Items>
 83                                                             <ext:Radio runat="server" ID="tleft" BoxLabel="居左" TagString="left" Checked="true" />
 84                                                             <ext:Radio runat="server" ID="tcenter" BoxLabel="居中" TagString="center" />
 85                                                             <ext:Radio runat="server" ID="tright" BoxLabel="居右" TagString="right" />
 86                                                         </Items>
 87                                                     </ext:RadioGroup>
 88                                                     <ext:ComboBox ID="tSumType" runat="server" FieldLabel="匯總方式" Editable="false">
 89                                                         <Items>
 90                                                             <ext:ListItem Text="不匯總" Value="none" />
 91                                                             <ext:ListItem Text="合計" Value="sum" />
 92                                                             <ext:ListItem Text="計數" Value="count" />
 93                                                             <ext:ListItem Text="平均值" Value="average" />
 94                                                             <ext:ListItem Text="最大值" Value="max" />
 95                                                             <ext:ListItem Text="最小值" Value="min" />
 96                                                         </Items>
 97                                                     </ext:ComboBox>
 98                                                     <ext:TextField ID="tDefaultValue" FieldLabel="默認值" runat="server" Hidden="true" />
 99                                                     <ext:MultiCombo runat="server" ID="tChildCols" FieldLabel="可選子列" Editable="false"
100                                                         DisplayField="Name" ValueField="Id" QueryMode="Local">
101                                                         <Store>
102                                                             <ext:Store ID="childColStore" runat="server">
103                                                                 <Model>
104                                                                     <ext:Model ID="Model4" runat="server">
105                                                                         <Fields>
106                                                                             <ext:ModelField Name="Id" />
107                                                                             <ext:ModelField Name="Name" />
108                                                                         </Fields>
109                                                                     </ext:Model>
110                                                                 </Model>
111                                                             </ext:Store>
112                                                         </Store>
113                                                         <Listeners>
114                                                             <Select Fn="childColSelect" />
115                                                             <Change Fn="MulitiComboChangeFunc" />
116                                                             <Expand Handler="SetChildColumnSource(tChildCols,currentControlId.getValue())" />
117                                                         </Listeners>
118                                                     </ext:MultiCombo>
119                                                     <ext:CheckboxGroup ID="CheckboxGroup3" runat="server">
120                                                         <Items>
121                                                             <ext:Checkbox runat="server" ID="tIsReadOnly" BoxLabel="只讀" />
122                                                             <ext:Checkbox runat="server" ID="tIsHide" BoxLabel="隱藏" />
123                                                         </Items>
124                                                     </ext:CheckboxGroup>
125                                                 </Items>
126                                             </ext:FormPanel>
127                                             <ext:Panel ID="formProperty" runat="server" Border="false" Layout="FormLayout" BodyPadding="5">
128                                                 <CustomConfig>
129                                                     <ext:ConfigItem Name="type" Value="formTemplate" />
130                                                 </CustomConfig>
131                                                 <Items>
132                                                     <ext:TextArea runat="server" ID="tbFormTemplateName" LabelAlign="Top" FieldLabel="表單模板名稱"
133                                                         LabelWidth="60" />
134                                                     <ext:TextArea runat="server" ID="tbFormTemplateRemark" LabelAlign="Top" FieldLabel="表單模板備注"
135                                                         LabelWidth="60" />
136                                                 </Items>
137                                             </ext:Panel>
138                                         </Items>
139                                     </ext:Panel>

屬性區域示例代碼

表單設計器的界面框架設計就介紹到這里。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於Extjs的web表單設計器第五節——數據庫設計基於Extjs的web表單設計器第四節——控件拖放基於Extjs的web表單設計器第七節——取數公式設計之取數公式的使用第六節數據的關聯性分析第六節、雙目視覺之相機標定第六節：Linux之基於Centos系統安裝Redis、MySQL、Nginx 第六節，TensorFlow編程基礎案例-保存和恢復模型(中) 《C# 爬蟲破境之道》：第二境爬蟲應用 — 第六節：反爬策略研究第六節：MySQL索引優化復習與加強(如何選擇、Order By和Group By、分頁優化、Join優化、Count優化) 第六節: EF高級屬性(二) 之延遲加載、立即加載、顯示加載(含導航屬性)

基於Extjs的web表單設計器 第六節——界面框架設計

免責聲明！

基於Extjs的web表單設計器第六節——界面框架設計