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>