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