<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ExtPaymentPayeeList.ascx.cs" Inherits="APC.Forms.UserControls.ExtPaymentPayeeList" %>
<script type="text/javascript">
        var onComboRender = function (combo) 
        {
            Ext.fly(combo.getPicker()).on("mousedown", function (e) {
                this.ownerCt.on(
                    "beforehide",
                    function () {
                        return false;
                    },
                    null,
                    {
                        single: true
                    }
                );
            },
            combo);
        };
    function refreshBankAccounts(source, control, store) {
        // routine to invoke referesh of bank accounts
        if (control == null)
            return false;
        if (source.getValue() == null || source.getValue() == '')
            return false;
        control.clearValue(); 
        control.setDisabled(false);
        store.reload();
        control.focus(false, 100);
    }
</script>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
                  <ext:DropDownField ID="dropPayee" TriggerIcon="Search" EmptyText="Select Payee" AllowBlank=false FieldLabel="Payee" MsgTarget=Side runat="server" Mode=ValueText Name="dropPayee">
                   <Listeners>
                   <Collapse Handler="refreshBankAccounts(#{dropPayee}, #{cmbBankAccount}, #{BankAccountStore});" />        
                   <Expand Handler="#{txtPayeeSearch}.focus(false, 100);" />
                  </Listeners>
                  <Component>
                    <ext:Panel runat="server" ID="pnlPayeeInfo" Layout="BorderLayout" Width="700" Height="470">
                    <Items>
                        <ext:Panel runat="server" Title="Find Payee" Icon="Magnifier" Margins="0 0 0 0" BodyPadding="0"  Layout="VBoxLayout" Frame="true" Region="North">
                        <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
                        </LayoutConfig>
                        <Items>
                            <ext:TextField FieldLabel="Search" ID="txtPayeeSearch" EmptyText="Please capture Name or Email Address (include @) to Search For" AllowBlank="true" runat="server" />
                          
                        </Items>
                        <Buttons>
                            <ext:Button runat="server" Text="Search" Icon="Find" ID="btnPayeeSearch">
                            <DirectEvents>
                                <Click OnEvent="btnPayeeSearch_Click" Timeout="600000">
                                <EventMask ShowMask="true" Msg="Searching..." MinDelay="500" />
                                <ExtraParams>
                                    <ext:Parameter Name="name" Value="#{txtPayeeSearch}.getValue()" Mode="Raw" Encode="true"/>
                                    <ext:Parameter Name="type" Value="-1" Mode="Raw" Encode="true"/> 
                                </ExtraParams>
                                </Click>
                            </DirectEvents>        
                        </ext:Button>     
                        </Buttons>       
                    </ext:Panel>
                     <ext:Panel ID="pnlPayeeList" runat="server" Region="West" Width="500" Frame="true" Layout="AnchorLayout">
                     <Items>
                       <ext:GridPanel runat="server" Title="Payees" ID="grdPayee"  AnchorHorizontal="100%" AnchorVertical="100%">
                            <View>
                            <ext:GridView ID="grdView" runat="server"/>
                            </View>

                     <Listeners>
                             <ItemDblClick Handler="#{dropPayee}.setValue(record.data.ComboId,'(' + record.data.Id + ') ' + record.data.Name, true);"/>
                     </Listeners>
 <TopBar>
             <ext:Toolbar ID="toolPayee" runat="server">
            <Items>
                <ext:Button ID="btnAddPayee" runat="server" Text="Add..." Icon="Add">
                <DirectEvents>
                <Click OnEvent="AddPayeeDetail">
                </Click>
                </DirectEvents>

                </ext:Button>
            </Items>
            </ext:Toolbar>
 </TopBar>
 <Store>
     <ext:Store ID="StorePayee" runat="server" AutoLoad="false" GroupField="TypeString">
      <Model>
           <ext:Model ID="modelPayee" 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>
  <ColumnModel ID="cmPayee" runat="server">
  <Columns>
       <ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Align="Center" Text="Select" Width="40">
     <Commands>
           <ext:ImageCommand Icon="Accept" CommandName="Pick">
            <ToolTip Title="Payee" Text="Click here to choose this Payee" />
        </ext:ImageCommand>
     </Commands>
      <Listeners>          
         <Command Handler="#{dropPayee}.setValue(record.data.ComboId,'(' + record.data.Id + ') ' + record.data.Name, true);" />
      </Listeners>
      </ext:ImageCommandColumn> 
     <ext:Column ID="colPayeeName" runat="server" Text="Name" DataIndex="Name" Width="200" Groupable="false" />
     <ext:Column ID="colPayeeInfo" runat="server" Text="Information" DataIndex="DisplayInfo" Width="200" Flex="1" Groupable="false" />
    </Columns>
    </ColumnModel>
    <SelectionModel>
        <ext:RowSelectionModel ID="rsmPayee" runat="server" SingleSelect="true">
         <DirectEvents>
            <Select OnEvent="LoadPayeeDetail" Buffer="250">
                    <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{PayeeDetailsPanel}" />
                        <ExtraParams>
                            <ext:Parameter Name="PayeeId" Value="record.getId()" Mode="Raw" />
                        </ExtraParams>
                 </Select>
           </DirectEvents>
        </ext:RowSelectionModel>
    </SelectionModel>
                 <Features>
            <ext:Grouping GroupHeaderTplString='{name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' />
            </Features>

</ext:GridPanel>
                    </Items>                    
                    </ext:Panel>
                     <ext:Panel Split="true" Collapsible="false" runat="server" Region="Center" Title="Payee Information" ID="PayeeDetailsPanel" Frame="true" AutoScroll="true" Icon="Information" Disabled="true">
                        <TopBar>
                            <ext:Toolbar ID="toolEdit" runat="server">
                             <Items>
                               <ext:Button runat="server" Text="Select this Payee" Icon="Accept" ID="btnAcceptPayee" Disabled="true" Handler="var record = #{rsmPayee}.getSelection()[0];#{dropPayee}.setValue(record.data.ComboId, '(' + record.data.Id + ') ' + record.data.Name, true);" />
                                 <ext:Button ID="btnEditPayee" runat="server" Text="Edit..." Icon="ApplicationEdit" Disabled="true">
                                  <DirectEvents>
                                    <Click OnEvent="ManagePayeeDetail">
                                    <ExtraParams>
                                        <ext:Parameter Name="Selected" Value="Ext.encode(#{grdPayee}.getRowsValues({selectedOnly:true}))" Mode="Raw"/>
                                    </ExtraParams>
                                    </Click>
                                    </DirectEvents>

                                </ext:Button>

                                <ext:ToolbarFill />
                              </Items>
                              </ext:Toolbar>                        
                            </TopBar>
                       <Items>
                         <ext:UserControlLoader runat="server" ID="pnlPayeeDetailInfo" Path="~/Forms/UserControls/ExtPayeeInfo.ascx"/>
                       </Items>
                    </ext:Panel>
                    </Items>
                    </ext:Panel>
 </Component>
 </ext:DropDownField>
 <ext:Window ID="detailsWin" Height="500" Width="700" Title="Payee Information" Closable="true" CloseAction="Hide" Plain=true runat="server" AutoRender=false Hidden=true Modal="true" Layout="FitLayout" Constrain="true">
 <Listeners>
 <Close Handler="#{grdPayee}.store.reload();"></Close>
 </Listeners>
 <Loader Mode="Frame" AutoLoad="false" DisableCaching=true/>
 </ext:Window>
