Coolite Toolkit学习笔记九：表单布局控件FormLayout与FromPanel
?????FormLayout在我們平時開發中使用頻率非常高，使用它可快速、方便的實現表單界面布局，以及使用一些其他控件自身的特性組合起來實現豐富強大的UI界面。下面通過一個簡單示例來體驗FormLayout的強大功能。
<ext:Panel?ID="Panel1"?runat="server"?Title="用戶登錄"?Width="300"?BodyStyle="padding:5px;"?>????<Body>
????????<ext:FormLayout?ID="FormLayout1"?runat="server"?Width="150"?>
????????????<ext:Anchor?Horizontal="100%">
????????????????<ext:TextField?ID="tfUserName"?runat="server"?FieldLabel="用戶名"?/>
????????????</ext:Anchor>
????????????<ext:Anchor?Horizontal="100%">
????????????????<ext:TextField?ID="tfPassword"?runat="server"?FieldLabel="用戶密碼"?/>
????????????</ext:Anchor>
????????????<ext:Anchor?Horizontal="100%">
????????????????<ext:Button?ID="btnLogin"?runat="server"?Text="登錄"/>
????????????</ext:Anchor>
????????</ext:FormLayout>
????</Body>
</ext:Panel>
??????Coolite Toolkit規定FromLayout控件必須放置在一個容器控件里，如上則將其放置在Panel控件里，通過FormLayout布局了一個用戶登錄界面，運行效果如下所示：
??????????????????
??????如上只是實現了最基本的界面布局，而且效果并不是很理想。OK，下面基于這個上面來做一些調整。現在要實現文本框沒有輸入數據的時候則提示用戶輸入，并為其加上非空驗證，通過AjaxEvents提供表單提交的事件處理函數，通過Listeners提供表單的提交前的客戶端驗證功能。相關代碼如下：
????????<ext:FormLayout?ID="FormLayout1"?runat="server"?Width="150"?>
????????????<ext:Anchor?Horizontal="100%">
????????????????<ext:TextField?ID="tfUserName"?runat="server"?
????????????????FieldLabel="用戶名"?
????????????????EmptyText="請輸入用戶名"
????????????????AllowBlank="false"??
????????????????BlankText="用戶名不能為空！"/>
????????????</ext:Anchor>
????????????<ext:Anchor?Horizontal="100%">
????????????????<ext:TextField?ID="tfPassword"?runat="server"?
????????????????FieldLabel="用戶密碼"?
????????????????EmptyText="請輸入登錄密碼"
????????????????InputType="Password"??
????????????????AllowBlank="false"?
????????????????BlankText="用戶密碼不能為空！"/>
????????????</ext:Anchor>
????????</ext:FormLayout>
????</Body>
????<Buttons>
????????<ext:Button?ID="btnLogin"?Text="登錄"?runat="server"?Icon="Accept">
????????????<AjaxEvents>
????????????????<Click?OnEvent="LoginClick">
????????????????????<EventMask?ShowMask="true"?Msg="正在登錄系統"?MinDelay="500"?/>
????????????????</Click>
????????????</AjaxEvents>
????????????<Listeners>
????????????????<Click?Handler="if(!#{tfUserName}.validate()?||?!#{tfPassword}.validate())?{
????????????????????Ext.Msg.alert('錯誤提示','用戶名和用戶密碼不能為空！');
????????????????????return?false;?
????????????????}"?/>
????????????</Listeners>
????????</ext:Button>
????????<ext:Button?ID="btnCancel"?Text="清空"?runat="server"?Icon="Cancel">
????????????<AjaxEvents>
????????????????<Click?OnEvent="CancelClick"/>
????????????</AjaxEvents>
????????</ext:Button>
????</Buttons>
</ext:Panel>
??????
??????仔細看來FormLayout?控件使用是非常簡單的，表單里面具體要設計為什么樣子的，最終還得看使用的其他相關控件。在前面提到FormLayout控件需要放置在一個容器內部，其實Coolite Toolkit專們為FromLayout控件提供了一個容器控件FromPanel于之搭配，其使用方法和Panel基本相同，通過FromPanel+FromLayout組合設計出來的UI界面效果更佳。如下郵件發送表單示例：
????Frame="true"?Title="郵件發送表單"?Width="450">
????<Body>
????????<ext:FormLayout?ID="FormLayout2"?runat="server"?LabelWidth="60">
????????????<ext:Anchor?Horizontal="100%">
????????????????<ext:TextField?ID="tfTitle"?runat="server"?FieldLabel="郵件主題"?
????????????????????AllowBlank="false"?BlankText="郵件主題不能為空"/>
????????????</ext:Anchor>
????????????<ext:Anchor?Horizontal="100%">
????????????????<ext:TextArea?ID="tfContent"?runat="server"?FieldLabel="郵件內容"?Height="150"/>
????????????</ext:Anchor>
????????????<ext:Anchor?Horizontal="100%">
????????????????<ext:FileUploadField?ID="upAttachment"?runat="server"?FieldLabel="郵件附件"?
????????????????????ButtonText="選擇附件"?/>
????????????</ext:Anchor>
????????????<ext:Anchor?Horizontal="100%">
????????????????<ext:DateField?ID="tfTime"?runat="server"?FieldLabel="發送時間"/>
????????????</ext:Anchor>
????????</ext:FormLayout>
????</Body>
????<Buttons>
????????<ext:Button?ID="btnSend"?runat="server"?Icon="WorldGo"?Text="發送"?>
????????????<AjaxEvents>
????????????????<Click?OnEvent="SendClick"?/>
????????????</AjaxEvents>
????????</ext:Button>
????</Buttons>
</ext:FormPanel>
??????????????????
?????
??????需要注意的就是FormLayout?的LabelWidth屬性，很多新手朋友在學習Coolite Toolkit的FromLayout的時候，都遇到字段名和TextBox中間存在很長的距離怎么也調不了，其實這個距離是可以調整的，通過設置LabelWidth屬性值既可。
注：此文章轉載至Bēniaǒ成長筆記
總結
以上是生活随笔為你收集整理的Coolite Toolkit学习笔记九：表单布局控件FormLayout与FromPanel的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Events are a bad ide
- 下一篇： 数据安全管理规定