Oct 21, 2009, 1:13 PM
[CLOSED] Custom ComboBox in GridPanel Set Displayed Text
Hi,
Is it possible to set the displayed text in a searchable combobox without affecting the ID value?
I have a custom (searchable) ComboBox in a GridPanel where the store does not load until the a search is performed. I can't change the AutoLoad setting as over 10,000 records are initially returned. The problem is that until an item is selected from the combobox the ValueField is displayed when a GridPanel row is selected rather than the DisplayField.
I have included a picture below to show what I mean.
The code to implement is also included below.
Thanks
The .aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CooliteTest.aspx.cs" Inherits="CooliteTest" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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="Head1" runat="server">
<title>Buffer Grid Example - Ext.Net Examples</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; }
.noteCls
{
background-color:Gray;
font: normal 11px tahoma, arial, helvetica, sans-serif;
color:white !important;
}
</style>
<script type="text/javascript">
function danTest(a, b, c, d, e)
{
//alert("");
//a.grid.colModel.columns[3].editor.startValue = "BLAH";
danTest2.defer(1);
}
function danTest2()
{
//grdData.colModel.columns[3].editor.setRawValue("Equipment 4");
}
function test(combo, record, index)
{
TextField1.setValue("sfsdfs");
// #{TextField1}.setValue(this.getValue());
}
function bulkUpdateValidateEdit(e)
{
if (e.value != "")
{
e.record.set("EquipmentID", Store2.getById(e.value).data.DataID);
e.record.set("EquipmentName", Store2.getById(e.value).data.DataName);
}
}
function test2(comp, test)
{
var zpTest = "asdas";
}
function EquipmentNameRender(lValue, opControl, opRecord)
{
if (lValue)
{
return opRecord.data.EquipmentName
}
return "";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store runat="server" ID="Store1">
<Proxy>
<ext:HttpProxy Url="handler.ashx" />
</Proxy>
<Reader>
<ext:JsonReader Root="Equipment" TotalProperty="totalCount" IDProperty="RecordID">
<Fields>
<ext:RecordField Name="RecordID" />
<ext:RecordField Name="RecordName" />
<ext:RecordField Name="EquipmentID" />
<ext:RecordField Name="EquipmentName" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store runat="server" ID="Store2" AutoLoad="false">
<Proxy>
<ext:HttpProxy Url="CooliteHandler.ashx" />
</Proxy>
<Reader>
<ext:JsonReader Root="Data" TotalProperty="totalCount" IDProperty="DataID">
<Fields>
<ext:RecordField Name="DataID" />
<ext:RecordField Name="DataName" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<div style="width:600px;height:800px;">
<ext:TextField ID="TextField1" runat="server">
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Title="Title" Html="Content" AutoShow="true" />
</ToolTips>
</ext:TextField>
<ext:Panel ID="pnlData" runat="server" Title="Data" Height="400px">
<Content>
<ext:FitLayout ID="FitLayout3" runat="server">
<Items>
<ext:GridPanel
ID="grdData"
StripeRows="true"
runat="server"
StoreID="Store1"
EnableDragDrop="false"
TrackMouseOver="false"
ClicksToEdit="1">
<ColumnModel>
<Columns>
<ext:Column DataIndex="RecordID" Header="ID"></ext:Column>
<ext:Column DataIndex="RecordName" Header="Name Tooltip">
<Editor>
<ext:TextField runat="server" ID="txtRecordName" TabTip="popopopop">
<Listeners>
<Render Handler="Ext.QuickTips.register(Ext.apply({target: this.el.id}, {title:'Format', text:'xx-xx-xxxxxxx'}));"/>
</Listeners>
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column DataIndex="RecordName" Header="Name Notes">
<Editor>
<ext:TextField runat="server" ID="TextField2" Note="NSN requires format: xx-xxx-xxxxxxx" NoteCls="noteCls">
</ext:TextField>
</Editor>
</ext:Column>
<ext:Column DataIndex="EquipmentID" Header="Name Combo" Width="200">
<Renderer Fn="EquipmentNameRender" />
<Editor>
<ext:ComboBox
ID="ComboBox1"
runat="server"
StoreID="Store2"
DisplayField="DataName"
ValueField="DataID"
TypeAhead="false"
LoadingText="Searching..."
Width="570" Mode="Remote" TriggerAction="All"
HideTrigger="true"
ItemSelector="div.search-item"
MinChars="2">
<Template ID="Template1" runat="server">
<tpl for=".">
<div class="search-item">
{DataName}
</tpl>
</Template>
<Listeners>
<Select Fn="test" />
<AfterRender Fn="test2" />
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<ValidateEdit Fn="bulkUpdateValidateEdit" />
<BeforeEdit Fn="danTest" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:FitLayout>
</Content>
</ext:Panel>
</form>
</body>
</html>
Handler for the gridpanel store<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Collections.Generic;
using Ext.Net;
using BMTWeb;
using hazmat;
using System.Data;
using System.Web.SessionState; //Reference IReadOnlySessionState for read-only access to session or IRequiresSessionState for read/write access
public class Handler : IHttpHandler, IReadOnlySessionState {
public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "text/json";
IList<Dictionary<string, string>> result = new List<Dictionary<string, string>>();
hazmat.User opUser;
var query = string.Empty;
opUser = (hazmat.User)context.Session["User"];
if (!string.IsNullOrEmpty(context.Request["query"]))
{
query = context.Request["query"];
}
//Loop through data records
Dictionary<string, string> item2;
for (int lpLoop = 0; lpLoop < 10; lpLoop++)
{
item2 = new Dictionary<string, string>();
item2.Add("RecordID", lpLoop.ToString());
item2.Add("RecordName", "Record " + lpLoop.ToString());
item2.Add("EquipmentID", "1");
item2.Add("EquipmentName", "Equipment 1");
result.Add(item2);
}
context.Response.Write(String.Format("{{totalCount:{1},'Equipment' : {0}}}", JSON.Serialize(result), 10));
}
public bool IsReusable {
get {
return false;
}
}
}
Handler for the combo box<%@ WebHandler Language="C#" Class="CooliteHandler" %>
using System;
using System.Web;
using System.Collections.Generic;
using Ext.Net;
using BMTWeb;
using hazmat;
using System.Data;
using System.Web.SessionState;
public class CooliteHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/json";
IList<Dictionary<string, string>> result = new List<Dictionary<string, string>>();
//Loop through data records
Dictionary<string, string> item2;
for(int lpLoop = 1; lpLoop <= 10; lpLoop++)
{
item2 = new Dictionary<string, string>();
item2.Add("id", lpLoop.ToString());
item2.Add("DataID", lpLoop.ToString());
item2.Add("DataName", "Equipment " + lpLoop.ToString());
result.Add(item2);
}
context.Response.Write(String.Format("{{totalCount:{1},'Data' : {0}}}", JSON.Serialize(result), 10));
}
public bool IsReusable {
get {
return false;
}
}
}