What's New?

[CLOSED] Combobox Type Ahead Selection Question

  1. #1
    Jun 15, 2009, 1:09 PM

    [CLOSED] Combobox Type Ahead Selection Question

    I have a combobox I am using for a company search tool. I load it with some of the possible companies and allow type ahead so the user can select a company from the list and see their details. If the company is not found in the store/drop down list, I want the combo box to submit the characters typed into the box to a javascript function and then the system will do a search based on those characters.

    This worked before the .8 update, but it seems that this little bug (and in my case a feature [Smile] ) was changed.

    How can I get characters typed into the combo box, that don't match a value in the combobox, into a javascript function so I can use them?

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm4.aspx.vb" Inherits="HomePage.WebForm4" %>

<%@ 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 id="Head2" runat="server">
    <title>The Magazine Manager</title>
   
    <script runat="server">  
       
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load          
            'load the navigation menu
            If Not Page.IsPostBack Then
                SetupStore()
            End If
        End Sub
       
        Public Sub SetupStore()
            Dim Names As Object() = New Object(4) {}
            Dim i As Integer
            For i = 0 To 4
                Names(i) = New Object() {i, "Company" &amp; i}
            Next
           
            StoreNames.DataSource = Names
            StoreNames.DataBind()
        End Sub
    </script>
   
    <script type="text/javascript">

        var selectCustomer = function() {
            var ID = cboSearch.getValue();
            var customer = cboSearch.getText();

            Ext.Msg.alert('Select', 'customer: ' + customer + ' - id: ' + ID);

            //clear out the combo box for the next search
            //cboSearch.setValue('')

            if (ID == '') {
                //nothing selected
            } else if (isNaN(ID)) {
                //no company name found that matches, do a search
            } else {
                //company name matched, open the company record
            }
            return false;
        };

        var searchCustomer = function() {
            //var ID = cboSearch.getValue();
            //var customer = cboSearch.getText();

            //Ext.Msg.alert('Search', gsCustomersID);
            Ext.Msg.alert('Search', '');           
        };
   
    </script>      
   
    <style type="text/css"> 
        .search-item {font: 11px tahoma; border: 1px solid #fff; color: #555;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" InitScriptMode="Inline">
    </ext:ScriptManager>
   
     <ext:Store ID="StoreNames" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="ID" Type="Int"/>
                    <ext:RecordField Name="Name" Type="String"/>
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
   
    <ext:Panel runat="server" ID="Panel1" Title="Testing">
        <Body>
            <ext:ComboBox
                ID="cboSearch"
                runat="server"
                StoreID="StoreNames"
                DisplayField="Name"
                ValueField="ID"
                TypeAhead="true"
                LoadingText="Searching..."
                Width="150"                  
                ListWidth="150"                             
                HideTrigger="true"
                MinChars="3"
                FireSelect&#111;nload="false"
                ItemSelector="div.search-item"
                ForceSelection="false" >
                <Template ID="Template1" runat="server">
                   <tpl for=".">
                      <div class="search-item">
                         {Name}
                      

                   </tpl>
                </Template>
                <Listeners>
                    <Select Fn="selectCustomer" />
                </Listeners>
            </ext:ComboBox>
            <ext:Button runat="server" ID="ButtonCustomerSearch" Text="" Icon="PlayBlue" Width="10">
                <Listeners>
                    <Click Fn="selectCustomer" />
                </Listeners>
            </ext:Button>
        </Body>
    </ext:Panel>
   
</form>
</body>
</html>
    p.s. I am actually getting the drop down values from a web service as in this example. For simplicity's sake, I just created the list in code, the values from the web service act the same way.

  2. #2
    Jun 16, 2009, 9:39 AM

    RE: [CLOSED] Combobox Type Ahead Selection Question

    Hi,

    I am not sure that clear understood your problem. Calling getValue()/getRowValue() functions you can get typed text.
    Using TypeAhead and custom values is not good idea, it is better to set TypeAhead="false"
  3. #3
    Jun 16, 2009, 10:08 AM

    RE: [CLOSED] Combobox Type Ahead Selection Question



    I cannot get the text typed into the combo box. Either the combobox selects the first item and the getValue() returns that value, or if I press the escape key and then click the search button underneath it, the getValue() returns an empty string.

    For instance, in this example, I type in "aaa" and the combobox shows me "Company0" through "Company4" and "Company0" seems to be selected by default. If I click the enter key to run the selectCustomers function, getValue() returns ID 0 for "Company0", I actually want to get the characters typed into the combobox, not the first item in the selection.

    Also if I enter "aaa" and hit the escape key so that nothing is selected from the drop down, then click the search button, the getValue() returns an empty string. I would like to get the text "aaa" that was typed in to use in my javascript function.

    I reset the type ahead to false... but that doesn't change anything.
  4. #4
    Jun 17, 2009, 11:47 AM

    RE: [CLOSED] Combobox Type Ahead Selection Question

    Hi,

    Does the following example is what you need?

    <%@ Page Language="vb" %>
<%@ 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 id="Head2" runat="server">
    <title>The Magazine Manager</title>
    
    <script runat="server">   
        
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load           
            'load the navigation menu
            If Not Page.IsPostBack Then
                SetupStore()
            End If
        End Sub
        
        Public Sub SetupStore()
            Dim Names As Object() = New Object(4) {}
            Dim i As Integer
            For i = 0 To 4
                Names(i) = New Object() {i, "Company" &amp; i}
            Next
            
            StoreNames.DataSource = Names
            StoreNames.DataBind()
        End Sub
    </script>
    
    <script type="text/javascript">
        var selectCustomer = function() {
            var ID = cboSearch.getValue();
            var customer = cboSearch.getText();            
                        
            if (cboSearch.getSelectedIndex() === -1) {
                alert("no company name found that matches, do a search: " + customer);            
            } else {
                alert("company name matched, open the company record: "+customer);
            }
            return false;
        };       
    
    </script>       
    
    <style type="text/css">  
        .search-item {font: 11px tahoma; border: 1px solid #fff; color: #555;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" InitScriptMode="Inline">
    </ext:ScriptManager>
    
     <ext:Store ID="StoreNames" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="ID" Type="Int"/> 
                    <ext:RecordField Name="Name" Type="String"/> 
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store> 
    
    <ext:Panel runat="server" ID="Panel1" Title="Testing">
        <Body>
            <ext:ComboBox
                ID="cboSearch"
                runat="server" 
                StoreID="StoreNames"
                DisplayField="Name"
                ValueField="ID"
                TypeAhead="false"
                LoadingText="Searching..." 
                Width="150"                   
                ListWidth="150"                              
                HideTrigger="true"
                MinChars="3" 
                FireSelect&#111;nload="false" 
                ItemSelector="div.search-item" 
                ForceSelection="false" >
                <Template ID="Template1" runat="server">
                   <tpl for=".">
                      <div class="search-item">
                         {Name}
                      

                   </tpl>
                </Template>
                <Listeners>
                    <Select Fn="selectCustomer" />
                </Listeners>
            </ext:ComboBox> 
            <ext:Button runat="server" ID="ButtonCustomerSearch" Text="" Icon="PlayBlue" Width="10">
                <Listeners>
                    <Click Fn="selectCustomer" />
                </Listeners>
            </ext:Button>
        </Body>
    </ext:Panel>
    
</form>
</body>
</html>
  5. #5
    Jun 17, 2009, 5:27 PM

    RE: [CLOSED] Combobox Type Ahead Selection Question



    Almost, except now the getValue() returns the CompanyName from the Display field of the combobox instead of the ID field from the combobox. When an item is selected from the box, I would like to use the ID that corresponds to it, when no item is selected I need to use the text to do a search for an ID.

    Any suggestions?
  6. #6
    Jun 19, 2009, 1:02 PM

    RE: [CLOSED] Combobox Type Ahead Selection Question



    Please Help!!!

    I need to get the text and the value from my combo box, the getValue() is returning the text...

    <%@ Page Language="vb" %>
<%@ 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 id="Head2" runat="server">
<title>The Magazine Manager</title>


    <script runat="server"> 


        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            'load the navigation menu
            If Not Page.IsPostBack Then
                SetupStore()
            End If
        End Sub


        Public Sub SetupStore()
            Dim Names As Object() = New Object(4) {}
            Dim i As Integer
            For i = 0 To 4
                Names(i) = New Object() {i, "Company" &amp; i}
            Next


            StoreNames.DataSource = Names
            StoreNames.DataBind()
        End Sub
    </script>


    <script type="text/javascript">
        var selectCustomer = function() {
            var index = cboSearch.getSelectedIndex();
            var value = cboSearch.getValue();
            var text = cboSearch.getText();
            alert('selected index: ' + index);
            alert('value: ' + value);
            alert('text: ' + text);
    return false;
    }; 


    </script> 
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" InitScriptMode="Inline">
</ext:ScriptManager>


<ext:Store ID="StoreNames" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="ID" Type="Int"/> 
<ext:RecordField Name="Name" Type="String"/> 
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store> 


<ext:Panel runat="server" ID="Panel1" Title="Testing">
    <Body>
        <ext:ComboBox
            ID="cboSearch"
            runat="server" 
            StoreID="StoreNames"
            DisplayField="Name"
            ValueField="ID"
            TypeAhead="false"
            HideTrigger="true"
            MinChars="3" 
            ForceSelection="false" >
            <Listeners>
                <Select Fn="selectCustomer" />
            </Listeners>
        </ext:ComboBox> 
        <ext:Button runat="server" ID="ButtonCustomerSearch" Text="" Icon="PlayBlue" Width="10">
            <Listeners>
                <Click Fn="selectCustomer" />
            </Listeners>
        </ext:Button>
    </Body>
</ext:Panel>


<ext:GridPanel runat="server" ID="GridPanel1" StoreID="StoreNames" Height="500">
    <ColumnModel>
        <Columns>
            <ext:Column DataIndex="ID" Header="ID"></ext:Column>
            <ext:Column DataIndex="Name" Header="Name"></ext:Column>
        </Columns>
    </ColumnModel>
</ext:GridPanel>


</form>
</body>
</html>
  7. #7
    Jun 20, 2009, 10:55 AM

    RE: [CLOSED] Combobox Type Ahead Selection Question

    Hi,

    If you set ForceSelection="false" (to ability to input custom values) then getValue will be always return text because custom text has no value. But you can get value form combo store (please note that combo always has store on client side even if you use inner items on server side)

    var selectCustomer = function() {
    var index = cboSearch.getSelectedIndex();
    var value = cboSearch.getValue();
    
    if(index !== -1){
        value = cboSearch.store.getAt(index).get(cboSearch.valueField);
    }
    
    var text = cboSearch.getText();
    alert('selected index: ' + index);
    alert('value: ' + value);
    alert('text: ' + text);
    return false;
};
  8. #8
    Jun 22, 2009, 10:08 AM

    RE: [CLOSED] Combobox Type Ahead Selection Question



    Perfect, thank you very much...

    </p>

Similar Threads

  1. Question about Checkbox Selection Model in GridPanel
    By slonati_adv in forum 2.x Help
    Replies: 0
    Last Post: Jul 12, 2012, 2:19 PM
  2. Combobox type Ahead
    By blurken in forum 2.x Help
    Replies: 0
    Last Post: May 14, 2012, 1:47 AM
  3. [CLOSED] Question about Selection Model in GridPanel
    By rosua in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 04, 2012, 11:29 AM
  4. ComboBox input type. And selectedItemValue
    By grmontero in forum 1.x Help
    Replies: 0
    Last Post: Sep 08, 2009, 6:23 PM
  5. [CLOSED] Type Ahead in a Combo
    By CMA in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 17, 2009, 10:54 AM

Posting Permissions