Coolite Toolkit学习笔记九：表单布局控件FormLayout与FromPanel

< 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 >

     < Body >
         < 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 >

< ext:FormPanel  ID ="FormPanel1"  runat ="server"  BodyStyle ="padding:5px;"  ButtonAlign ="Right"
    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 >