[CLOSED] Combobox behavior on lookup

  1. #1

    [CLOSED] Combobox behavior on lookup

    I'm trying to change the combobox behavior slightly to bind to the store at the appropriate time, but to not highlight the first item in the dropdown. I need to be able to type something in, have it do a lookup and then only choose an item if I arrow down; otherwise, I want to be able to just get the info typed in the box when pressing the enter key. Currently, the default behavior seems to be to highlight the first item in the dropdown and select that when I press enter. Here is my combo setup

    <ext:ComboBox
        ID="ComboBoxCustomerSearch"
        runat="server" 
        StoreID="StoreCustomerSearch"
        DisplayField="DisplayName"
        ValueField="ID"
        TypeAhead="false"
        LoadingText="Searching..." 
        Width="150" 
        ListWidth="150" 
        HideTrigger="true"
        MinChars="3" 
        FireSelectOnLoad="false" 
        EmptyText="Company Name"
        ItemSelector="div.search-item" 
        ForceSelection="false"
        AllowBlank="true" >
        <Template ID="Template1" runat="server">
            <tpl for=".">
            <div class="search-item">
            <h3>{CompanyName}</h3>
                    {FullName}
            
    
            </tpl>
        </Template> 
        <Listeners>
            <Select Fn="selectCustomer" />
        </Listeners>
    </ext:ComboBox>
    Any help would be appreciated.
  2. #2

    RE: [CLOSED] Combobox behavior on lookup

    Hi,

    Here is my attempt to build what you require. Please see the following sample. I didn't test much but it seems work as expected

    The example based on 'Custom_Search' example therefore you need a http handler from that example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>ComboBox with Template - Coolite Toolkit Example</title>
        <style type="text/css">
            .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;
            }
    
            .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>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
        <script type="text/javascript">
            var initCombo = function(){
                this.keyNav.enter = (function(e){
                    if(this.inKeyMode){
                        this.onViewClick();
                        this.delayedCheck = true;
                        this.unsetDelayCheck.defer(10, this);
                    }else{
                      this.collapse(); 
                      e.stopEvent(); 
                      this.delayedCheck = true;
                      this.unsetDelayCheck.defer(10, this);
                      return false;
                    }
                }).createDelegate(this);
            };
            
            var clearComboIndex = function(combo){
                combo.selectedIndex = -1;
                if(combo.view){
                    combo.view.clearSelections();
                }
            }   
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <p>
                Combo with Templates and Ajax<br />
                This is a more advanced example that shows how you can combine paging, Template to create a "live search" feature.
            </p>
            
            <ext:Store ID="Store1" runat="server" AutoLoad="false">
                <Proxy>
                    <ext:HttpProxy Method="POST" Url="Plants.ashx" />
                </Proxy>
                <Reader>
                    <ext:JsonReader Root="plants" TotalProperty="totalCount" >
                        <Fields>
                            <ext:RecordField Name="Common" />
                            <ext:RecordField Name="Botanical" />
                            <ext:RecordField Name="Light" />
                            <ext:RecordField Name="Price" Type="Float" />
                            <ext:RecordField Name="Indoor" Type="Boolean" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
                <Listeners>
                    <Load Handler="clearComboIndex(#{ComboBox1});" Delay="1" />
                </Listeners>
            </ext:Store>
            
            <div style="width:600px;">
                <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc">
    
    
    
                <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
                    <h3 style="margin-bottom:5px;">Search the plants</h3>
                    
                <ext:ComboBox 
                    ID="ComboBox1"
                    runat="server" 
                    StoreID="Store1"
                    DisplayField="Common" 
                    ValueField="Common"
                    TypeAhead="false"
                    LoadingText="Searching..." 
                    Width="570"
                    PageSize="10"
                    HideTrigger="true"
                    ForceSelection="false"
                    ItemSelector="div.search-item"        
                    MinChars="1">
                    <Template runat="server">
                       <tpl for=".">
                          <div class="search-item">
                             <h3>${Price}{Common}</h3>
                             {Botanical}
                          
    
                       </tpl>
                    </Template>
                    <Listeners>
                        <Focus Fn="initCombo" Single="true" />
                        <Expand Handler="this.inKeyMode = false;" />                    
                    </Listeners>
                </ext:ComboBox>    
                
                <div style="padding-top:4px;">
                    Plants search (type '*' (asterisk) for showing all)
                
    
                
    
    
    
                <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc">
    
    
            
    
                
      
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] Combobox behavior on lookup

    The initCombo and clearComboIndex functions work great,

    Thank you.

Similar Threads

  1. Combobox - Change of behavior
    By IFLOW in forum 2.x Help
    Replies: 2
    Last Post: Jul 18, 2012, 10:52 AM
  2. EntityDataSource and many to many lookup table
    By Silver Paladin in forum 1.x Help
    Replies: 0
    Last Post: Feb 22, 2012, 3:37 AM
  3. [CLOSED] Behavior javascript
    By rnfigueira in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 18, 2011, 2:43 PM
  4. [CLOSED] possible reason for this behavior?
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 01, 2010, 4:23 PM
  5. Replies: 5
    Last Post: Mar 30, 2010, 8:32 PM

Posting Permissions