Coolite 布局头部带查询功能

效果图：

Html代码：

<ext:Panel ID="Panel14" runat="server" Border="false" Header="false" BodyStyle="padding:2px 0px 0px 9px;" MonitorValid="true">
        <Body>
             <ext:FormLayout ID="FormLayout4" runat="server" LabelWidth ="60">
                    <ext:Anchor>
                          <ext:MultiField ID="MultiField1" runat="server" FieldLabel="客户帐号">
                                  <Fields>
                                     <ext:TextField ID="txtNetUserName" AllowBlank="false" BlankText="请输入客户帐号!"

　　　　　　　　　　　　　　　　　　　　MaxLength="50" EmptyText="请输入客户帐号" MaxLengthText="不能超过100个字符" runat="server"

　　　　　　　　　　　　　　　　　　　　FieldLabel="客户帐号" Width="120" TabIndex="1" EnableKeyEvents="true">
                                      </ext:TextField>
                                      <ext:Toolbar ID="Toolbar1" runat="server" Cls="form-toolbar" Flat="true">
                                             <Items>
                                                 <ext:ToolbarButton ID="butSelect" runat="server" Text="查询" Icon="Magnifier">
                                                           <ToolTips>
                                                                   <ext:ToolTip ID="ToolTip3" runat="server" Html="查询客户" />
                                                           </ToolTips>
                                                           <Listeners>
                                                              <Click Handler="
                                                                        if(!#{txtNetUserName}.validate()) {
                                                                               Ext.Msg.alert('警告','客户帐号不能为空！');
                                                                                  return false;
                                                                         }" />
                                                              </Listeners>
                                                        <AjaxEvents>
                                                        <Click OnEvent="butSelect_Click">
                                                                <EventMask Msg="查询中..." ShowMask="true" MinDelay="50" />
                                                        </Click>
                                                   </AjaxEvents>
                                            </ext:ToolbarButton>
                                       </Items>
                                 </ext:Toolbar>
                             </Fields>
                      </ext:MultiField>
                     </ext:Anchor>
              </ext:FormLayout>
        </Body>
</ext:Panel>

<ext:Panel ID="Panel6" runat="server" >
          <Body>
                <ext:ColumnLayout ID="ColumnLayout3" runat="server">
                      <ext:LayoutColumn >
                          <ext:Panel ID="Panel1" runat="server" Border="false" Header="false" BodyStyle="padding:2px 0px 0px 9px;">
                                 <Body>
                                    <ext:FormLayout ID="FormLayout8" runat="server" LabelWidth ="60">
                                         <ext:Anchor>
                                              <ext:TextField ID="txtCustomerName" runat="server" MaxLength="20"
                                                      FieldLabel="姓名" Width="120" TabIndex="6" ReadOnly="true" ></ext:TextField>
                                         </ext:Anchor>
                                         <ext:Anchor>
                                               <ext:TextField ID="txtCustomerType" runat="server" MaxLength="20"
                                                      FieldLabel="客户类型" Width="120" TabIndex="6" ReadOnly="true"></ext:TextField>
                                               </ext:Anchor>
                                          <ext:Anchor >
                                                 <ext:TextField ID="txtServerAddress" runat="server"

　　　　　　　　　　　　　　　　　　　　　　FieldLabel="服务站" Width="120" TabIndex="9" ReadOnly="true"></ext:TextField>
                                           </ext:Anchor>
                                    </ext:FormLayout>
                                  </Body>
                            </ext:Panel>
                       </ext:LayoutColumn>
                       <ext:LayoutColumn >
                             <ext:Panel ID="Panel7" runat="server" Border="false" Header="false" BodyStyle="padding:2px 0px 0px 9px;">
                                 <Body>
                                     <ext:FormLayout ID="FormLayout5" runat="server" LabelWidth ="60">
                                           <ext:Anchor>
                                                <ext:TextField ID="txtTelePhone" runat="server"

　　　　　　　　　　　　　　　　　　　　　　FieldLabel="电话" Width="120" TabIndex="7" ReadOnly="true"> </ext:TextField>
                                           </ext:Anchor>
                                           <ext:Anchor>
                                                <ext:TextField ID="txtMobil" runat="server"

　　　　　　　　　　　　　　　　　　　　　　FieldLabel="手机" Width="120" TabIndex="8" ReadOnly="true"> </ext:TextField>
                                            </ext:Anchor>
                                            <ext:Anchor>
                                                  <ext:TextField ID="txtCustomerState" runat="server"

　　　　　　　　　　　　　　　　　　　　　　FieldLabel="用户状态" Width="120" TabIndex="7" ReadOnly="true"> </ext:TextField>
                                             </ext:Anchor>
                                          </ext:FormLayout>
                                       </Body>
                                   </ext:Panel>
                                   </ext:LayoutColumn>
                                   <ext:LayoutColumn >
                                        <ext:Panel ID="Panel8" runat="server" Border="false" Header="false" BodyStyle="padding:2px 0px 0px 9px;">
                                             <Body>
                                                 <ext:FormLayout ID="FormLayout6" runat="server" LabelWidth ="60">
                                                    <ext:Anchor>
                                                        <ext:TextField ID="txtApplyDate" runat="server"

　　　　　　　　　　　　　　　　　　　　　　　　 FieldLabel="报装日期" Width="120" TabIndex="7" ReadOnly="true"> </ext:TextField>
                                                    </ext:Anchor>
                                                    <ext:Anchor>
                                                         <ext:TextField ID="txtStopDate" runat="server"

　　　　　　　　　　　　　　　　　　　　　　　　FieldLabel="停机日期" Width="120" TabIndex="8" ReadOnly="true"> </ext:TextField>
                                                     </ext:Anchor>
                                                     <ext:Anchor >
                                                          <ext:TextField ID="txtBalance" runat="server"

　　　　　　　　　　　　　　　　　　　　　　　　FieldLabel="余额" Width="120" TabIndex="9" ReadOnly="true"></ext:TextField>
                                                     </ext:Anchor>
                                           　　</ext:FormLayout>
                                              </Body>
                                          </ext:Panel>
                                   </ext:LayoutColumn>

　　　　</Body>

</ext:Panel>