<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PaymentPayeeCombo.ascx.cs" Inherits="APC.Forms.UserControls.PaymentPayeeCombo" %>
 <style>
        .search-item {
            font          : normal 11px tahoma, arial, helvetica, sans-serif;
            padding       : 3px 10px 3px 10px;
            border        : 1px solid #fff;
            border-bottom : 1px solid #eeeeee;
            white-space   : normal;
            color         : #555;
        }
        
        .search-item h3 {
            display     : block;
            font        : inherit;
            font-weight : bold;
            color       : #222;
            margin      :0px;
        }

        .search-item h3 span {
            float       : right;
            font-weight : normal;
            margin      : 0 0 5px 5px;
            width       : 100px;
            display     : block;
            clear       : none;
        } 
        
        p { width: 650px; }
        
        .ext-ie .x-form-text { position : static !important; }
    </style>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<ext:ComboBox runat="server" Name="dropPayee" FieldLabel="Payee" EmptyText="Enter 2 characters to begin search" AllowBlank="true" ForceSelection="false" MsgTarget="Side" DisplayField="Name" ValueField="ComboId" TypeAhead="true" PageSize="5"  MinChars="2" TriggerAction="Query" >
    <ListConfig  LoadingText="Searching..." MinWidth="400">
        <ItemTpl runat="server">
            <Html>
                <div class="search-item">
				    <h3><span>{DisplayInfo}</span>{Name}</h3>
					    {TypeString}
			    </div>
            </Html>
        </ItemTpl>
    </ListConfig>
    <Store>
        <ext:Store runat="server" AutoLoad="false" RemoteSort="true" PageSize="5">
            <Proxy>
                <ext:AjaxProxy Json="true" Url="../../DataService.asmx/PayeePaging" Timeout="60000">
                    <ActionMethods Read="POST" />
                    <Reader>
                        <ext:JsonReader Root="d.data" TotalProperty="d.total" />
                    </Reader>
                </ext:AjaxProxy>
            </Proxy>
            <Model>
                <ext:Model runat="server"  IDProperty="ComboId">
                    <Fields>
                        <ext:ModelField Name="Name" />
                        <ext:ModelField Name="Id" />
                        <ext:ModelField Name="DisplayInfo" />
                        <ext:ModelField Name="TypeString" />
                    </Fields>
                </ext:Model>                            
            </Model>
                <Sorters>
            <ext:DataSorter Property="Name" Direction="ASC" />
        </Sorters>
        </ext:Store>
    </Store>
              <DisplayTpl runat="server">
            <Html>
                <tpl for=".">
                    {Name} ({TypeString})
                </tpl>
            </Html>
        </DisplayTpl>
          <Listeners>
           <TriggerClick Handler="resetFieldTrigger(this);"/>
           <Select Handler="showFieldTrigger(this);" />
          </Listeners>
          <Triggers>
              <ext:FieldTrigger Icon="Clear" Qtip="Click to Reset Field" HideTrigger="true" />
          </Triggers>

</ext:ComboBox>    