Here is an example. We have a combo box that uses a handler for the datasource, with a listener onSelect. Also there is a Key Kinding added for the ENTER key. This is done to handle entry of something not in the list. However, if a user types in a name that is in the list, and hits the enter key, that is when we run into the conflict.
The Page:
<%@ Page Language="C#" %>
<!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="Head1" runat="server">
<title>Testing</title>
<style type="text/css">
/* Search Box */
.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;
}
</style>
<script type="text/javascript">
var onEnter = function (e) {
alert('Enter Clicked');
}
var onSelect = function () {
alert('ComboxBox selected');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray">
</ext:ResourceManager>
<ext:Panel ID="pnlForm" runat="server" Title="My Test Form" Border="false" Padding="0" Layout="FormLayout" AutoScroll="true">
<Items>
<ext:ComboBox ID="cmbRequestor" runat="server" TypeAhead="false" FieldLabel="Requestor" LoadingText="Searching..." Width="600" PageSize="10" HideTrigger="true" ItemSelector="div.search-item" MinChars="1">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad="false">
<Proxy>
<ext:HttpProxy Method="POST" Url="Test.ashx" />
</Proxy>
<Reader>
<ext:JsonReader Root="contacts" TotalProperty="total" IDProperty="ContactId">
<Fields>
<ext:RecordField Name="ContactId" Type="Int" />
<ext:RecordField Name="DisplayName" />
<ext:RecordField Name="Email" />
<ext:RecordField Name="Phone" />
<ext:RecordField Name="CompanyName" />
<ext:RecordField Name="ContactObjectTypeId" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<Listeners>
<Select Handler="onSelect()" />
</Listeners>
<Template ID="Template1" runat="server">
<Html>
<tpl for=".">
<div class="search-item">
<h3>{DisplayName}</h3>
{Email}<br />
{Phone}
</div>
</tpl>
</Html>
</Template>
</ext:ComboBox>
</Items>
</ext:Panel>
<ext:KeyMap ID="KeyMap1" runat="server" Target="={#{cmbRequestor}}">
<ext:KeyBinding>
<Keys>
<ext:Key Code="ENTER" />
</Keys>
<Listeners>
<Event Handler="onEnter(e);" />
</Listeners>
</ext:KeyBinding>
</ext:KeyMap>
</form>
</body>
</html>
The Handler called Test.ashx:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Ext.Net;
namespace ApexAffinity.Capture.Website.Handlers
{
/// <summary>
/// Summary description for Test
/// </summary>
public class Test : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
int start = 0;
int limit = 10;
string sort = string.Empty;
string dir = string.Empty;
string query = string.Empty;
if (!String.IsNullOrEmpty(context.Request["start"]))
{
start = Convert.ToInt32(context.Request["start"]);
}
if (!String.IsNullOrEmpty(context.Request["limit"]))
{
limit = Convert.ToInt32(context.Request["limit"]);
}
if (!String.IsNullOrEmpty(context.Request["sort"]))
{
sort = context.Request["sort"];
}
if (!String.IsNullOrEmpty(context.Request["dir"]))
{
dir = context.Request["dir"];
}
if (!String.IsNullOrEmpty(context.Request["query"]))
{
query = context.Request["query"];
}
List<Contact> toReturn = new List<Contact>();
toReturn.Add(new Contact() { CompanyName = "Logic Speak", ContactId = 1, ContactObjectTypeId = 1, DisplayName = "Jimmy Tester", Email = "test1@email.com", Email2 = "", Phone = "990-999-0765" });
toReturn.Add(new Contact() { CompanyName = "Logic Speak", ContactId = 2, ContactObjectTypeId = 1, DisplayName = "Donnie Tester", Email = "test2@email.com", Email2 = "", Phone = "990-999-5484" });
toReturn.Add(new Contact() { CompanyName = "Logic Speak", ContactId = 3, ContactObjectTypeId = 1, DisplayName = "Jason Tester", Email = "test3@email.com", Email2 = "", Phone = "990-999-5464" });
toReturn.Add(new Contact() { CompanyName = "Logic Speak", ContactId = 4, ContactObjectTypeId = 1, DisplayName = "Timmy Tester", Email = "test4@email.com", Email2 = "", Phone = "990-999-7777" });
toReturn.Add(new Contact() { CompanyName = "Logic Speak", ContactId = 5, ContactObjectTypeId = 1, DisplayName = "Barb Betty", Email = "test5@email.com", Email2 = "", Phone = "990-999-8888" });
toReturn.Add(new Contact() { CompanyName = "Logic Speak", ContactId = 6, ContactObjectTypeId = 1, DisplayName = "Ron Howard", Email = "test6@email.com", Email2 = "", Phone = "990-999-9999" });
toReturn.Add(new Contact() { CompanyName = "Logic Speak", ContactId = 7, ContactObjectTypeId = 1, DisplayName = "Jake Small", Email = "test7@email.com", Email2 = "", Phone = "990-999-0000" });
toReturn.Add(new Contact() { CompanyName = "Logic Speak", ContactId = 8, ContactObjectTypeId = 1, DisplayName = "Ed Biggs", Email = "test8@email.com", Email2 = "", Phone = "990-999-1223" });
toReturn.Add(new Contact() { CompanyName = "Logic Speak", ContactId = 9, ContactObjectTypeId = 1, DisplayName = "Susan Right", Email = "test9@email.com", Email2 = "", Phone = "990-999-6666" });
toReturn.Add(new Contact() { CompanyName = "Logic Speak", ContactId = 10, ContactObjectTypeId = 1, DisplayName = "Becky Wills", Email = "test10@email.com", Email2 = "", Phone = "990-999-5555" });
toReturn = toReturn.FindAll(i => i.DisplayName.StartsWith(query) || i.Email.StartsWith("query"));
context.Response.Write(string.Format("{{total:{0},'contacts':{1}}}", toReturn.Count, JSON.Serialize(toReturn)));
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class Contact
{
public string DisplayName { get; set; }
public string Email { get; set; }
public string Email2 { get; set; }
public string CompanyName { get; set; }
public string Phone { get; set; }
public int ContactId { get; set; }
public int ContactObjectTypeId { get; set; }
public Contact()
{
}
}
}
