官方有一個(gè)關(guān)于Grid CURD 的例子：http://examples.coolite.com/Examples/GridPanel/WebService_Connections/HandlerUsing/ 我在其基礎(chǔ)上稍微修改一下，用ComboBox作為Grid的Editor：

先show一下效果給大家堅(jiān)持看下去的動(dòng)力：

關(guān)鍵代碼：

復(fù)制代碼代碼如下:

<ext:Column ColumnID="ContactName" DataIndex="ContactName" Header="Contact Name" 
Width="150"> 
<Editor> 
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="stoContactName" DisplayField="Name" 
ValueField="Name" TypeAhead="false" LoadingText="Searching..." Width="570" PageSize="10" 
Editable="true" Mode="Remote" MinListWidth="200" ItemSelector="tr.search-item" 
MinChars="1" MsgTarget="Side" TriggerAction="All" Grow="true"> 
<CustomConfig> 
<ext:ConfigItem Name="tpl" Value="#{TplContactName}" Mode="Raw" /> 
</CustomConfig> 
</ext:ComboBox> 
</Editor> 
</ext:Column>

由于ComboBox作為Editor，是不能直接配置模板的，所以模板要獨(dú)立寫：

復(fù)制代碼代碼如下:

<ext:XTemplate ID="TplContactName" runat="server"> 
<div> 
<table id="data_table" class="t1"> 
<thead> 
<tr> 
<th> 
Name 
</th> 
<th> 
Desc 
</th> 
</tr> 
</thead> 
<tbody> 
<tpl for="."> 
<tr class="search-item"> 
<td>{Name}</td> 
<td>{Desc}</td> 
</tr> 
</tpl> 
</tbody> 
</table> 
</div> 
</ext:XTemplate>

再加上這個(gè)比較Cool的table樣式就基本上完成了:

復(fù)制代碼代碼如下:

body, table.t1 
{ 
font-size: 12px; 
} 
table.t1 
{ 
table-layout: fixed; 
empty-cells: show; 
border-collapse: collapse; 
margin: 0 auto; 
} 
td 
{ 
height: 20px; 
} 
h1, h2, h3 
{ 
font-size: 12px; 
margin: 0; 
padding: 0; 
} 
table.t1 
{ 
border: 1px solid #cad9ea; 
color: #666; 
} 
table.t1 th 
{ 
background-image: url(/extjs/resources/images/default/panel/white-top-bottom-gif/coolite.axd); 
background-repeat: repeat-x; 
height: 22px; 
} 
table.t1 td, table.t1 th 
{ 
border: 1px solid #cad9ea; 
padding: 0 1em 0; 
} 
table.t1 tr.a1 
{ 
background-color: #f5fafe; 
} 

Enjoy yourself！
完整的代碼：
Html

復(fù)制代碼代碼如下:

<%@ Page Language="C#" AutoEventWireup="true"%> 
<%@ 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></title> 
<style type="text/css"><!-- 
body, table.t1 
{ 
font-size: 12px; 
} 
table.t1 
{ 
table-layout: fixed; 
empty-cells: show; 
border-collapse: collapse; 
margin: 0 auto; 
} 
td 
{ 
height: 20px; 
} 
h1, h2, h3 
{ 
font-size: 12px; 
margin: 0; 
padding: 0; 
} 
table.t1 
{ 
border: 1px solid #cad9ea; 
color: #666; 
} 
table.t1 th 
{ 
background-image: url(/extjs/resources/images/default/panel/white-top-bottom-gif/coolite.axd); 
background-repeat: repeat-x; 
height: 22px; 
} 
table.t1 td, table.t1 th 
{ 
border: 1px solid #cad9ea; 
padding: 0 1em 0; 
} 
table.t1 tr.a1 
{ 
background-color: #f5fafe; 
} 

--></style><style type="text/css" bogus="1"> body, table.t1 
{ 
font-size: 12px; 
} 
table.t1 
{ 
table-layout: fixed; 
empty-cells: show; 
border-collapse: collapse; 
margin: 0 auto; 
} 
td 
{ 
height: 20px; 
} 
h1, h2, h3 
{ 
font-size: 12px; 
margin: 0; 
padding: 0; 
} 
table.t1 
{ 
border: 1px solid #cad9ea; 
color: #666; 
} 
table.t1 th 
{ 
background-image: url(/extjs/resources/images/default/panel/white-top-bottom-gif/coolite.axd); 
background-repeat: repeat-x; 
height: 22px; 
} 
table.t1 td, table.t1 th 
{ 
border: 1px solid #cad9ea; 
padding: 0 1em 0; 
} 
table.t1 tr.a1 
{ 
background-color: #f5fafe; 
} 
</style> 
</head> 
<body> 
<ext:ScriptManager ID="ScriptManager1" runat="server" /> 
<form id="form1" runat="server"> 
<div> 
<ext:Store runat="server" ID="stoContactName"> 
<Proxy> 
<ext:HttpProxy Url="CustomerHandler.ashx?action=contact" /> 
</Proxy> 
<Reader> 
<ext:JsonReader Root="data" TotalProperty="totalCount"> 
<Fields> 
<ext:RecordField Name="Name" /> 
<ext:RecordField Name="Desc" /> 
</Fields> 
</ext:JsonReader> 
</Reader> 
</ext:Store> 
<ext:XTemplate ID="TplContactName" runat="server"> 
<div> 
<table id="data_table" class="t1"> 
<thead> 
<tr> 
<th> 
Name 
</th> 
<th> 
Desc 
</th> 
</tr> 
</thead> 
<tbody> 
<tpl for="."> 
<tr class="search-item"> 
<td>{Name}</td> 
<td>{Desc}</td> 
</tr> 
</tpl> 
</tbody> 
</table> 
</div> 
</ext:XTemplate> 
<ext:Store ID="dsCustomers" runat="server" RemoteSort="true" UseIdConfirmation="true"> 
<Proxy> 
<ext:HttpProxy Url="CustomerHandler.ashx?action=query" /> 
</Proxy> 
<UpdateProxy> 
<ext:HttpWriteProxy Url="CustomerHandler.ashx?action=save" /> 
</UpdateProxy> 
<Reader> 
<ext:JsonReader ReaderID="CustomerID" Root="data" TotalProperty="totalCount"> 
<Fields> 
<ext:RecordField Name="CustomerID" SortDir="ASC" /> 
<ext:RecordField Name="CompanyName" /> 
<ext:RecordField Name="ContactName" /> 
<ext:RecordField Name="Email" /> 
<ext:RecordField Name="Phone" /> 
<ext:RecordField Name="Fax" /> 
<ext:RecordField Name="Region" /> 
<ext:RecordField Name="TranDate" Type="Date" /> 
</Fields> 
</ext:JsonReader> 
</Reader> 
<BaseParams> 
<ext:Parameter Name="limit" Value="15" Mode="Raw" /> 
<ext:Parameter Name="start" Value="0" Mode="Raw" /> 
<ext:Parameter Name="dir" Value="ASC" /> 
<ext:Parameter Name="sort" Value="CustomerID" /> 
</BaseParams> 
<SortInfo Field="CustomerID" Direction="ASC" /> 
</ext:Store> 
<ext:ViewPort ID="ViewPort1" runat="server"> 
<Body> 
<ext:FitLayout ID="FitLayout1" runat="server"> 
<ext:GridPanel ID="GridPanel1" runat="server" Header="false" Border="false" StoreID="dsCustomers" 
TrackMouseOver="true" ClicksToEdit="1" AutoExpandColumn="CompanyName" Height="500"> 
<ColumnModel ID="ColumnModel1" runat="server"> 
<Columns> 
<ext:Column ColumnID="CustomerID" DataIndex="CustomerID" Header="ID"> 
<Editor> 
<ext:TextField ID="TextField1" runat="server" MaxLength="5" AllowBlank="false" /> 
</Editor> 
</ext:Column> 
<ext:Column ColumnID="TranDate" DataIndex="TranDate" Header="Tran Date"> 
<Editor> 
<ext:DateField ID="DateField1" runat="server" Format="yyyy-MM-dd" MsgTarget="Side" /> 
</Editor> 
</ext:Column> 
<ext:Column ColumnID="CompanyName" DataIndex="CompanyName" Header="Company Name"> 
<Editor> 
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" /> 
</Editor> 
</ext:Column> 
<ext:Column ColumnID="ContactName" DataIndex="ContactName" Header="Contact Name" 
Width="150"> 
<Editor> 
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="stoContactName" DisplayField="Name" 
ValueField="Name" TypeAhead="false" LoadingText="Searching..." Width="570" PageSize="10" 
Editable="true" Mode="Remote" MinListWidth="200" ItemSelector="tr.search-item" 
MinChars="1" MsgTarget="Side" TriggerAction="All" Grow="true"> 
<CustomConfig> 
<ext:ConfigItem Name="tpl" Value="#{TplContactName}" Mode="Raw" /> 
</CustomConfig> 
</ext:ComboBox> 
</Editor> 
</ext:Column> 
<ext:Column ColumnID="Email" DataIndex="Email" Header="Email"> 
<Editor> 
<ext:TextField ID="TextField4" runat="server" Vtype="email" /> 
</Editor> 
</ext:Column> 
<ext:Column ColumnID="Phone" DataIndex="Phone" Header="Phone"> 
<Editor> 
<ext:TextField ID="TextField5" runat="server" /> 
</Editor> 
</ext:Column> 
<ext:Column ColumnID="Fax" DataIndex="Fax" Header="Fax"> 
<Editor> 
<ext:TextField ID="TextField6" runat="server" /> 
</Editor> 
</ext:Column> 
<ext:Column ColumnID="Region" DataIndex="Region" Header="Region"> 
<Editor> 
<ext:TextField ID="TextField7" runat="server" /> 
</Editor> 
</ext:Column> 
</Columns> 
</ColumnModel> 
<TopBar> 
<ext:Toolbar ID="Toolbar1" runat="server"> 
<Items> 
<ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk"> 
<Listeners> 
<Click Handler="#{dsCustomers}.save();" /> 
</Listeners> 
</ext:Button> 
<ext:Button ID="Button3" runat="server" Text="Add" Icon="Add"> 
<Listeners> 
<Click Handler="#{GridPanel1}.insertRecord(0, {});#{GridPanel1}.getView().focusRow(0);#{GridPanel1}.startEditing(0, 0);" /> 
</Listeners> 
</ext:Button> 
<ext:Button ID="Button2" runat="server" Text="Reject Changes" Icon="ArrowUndo"> 
<Listeners> 
<Click Handler="#{dsCustomers}.rejectChanges();" /> 
</Listeners> 
</ext:Button> 
</Items> 
</ext:Toolbar> 
</TopBar> 
<BottomBar> 
<ext:PagingToolBar ID="PagingToolbar1" runat="server" StoreID="dsCustomers" PageSize="15" /> 
</BottomBar> 
<Listeners> 
<BeforeEdit Handler="return !(e.field=='CustomerID' && !e.record.newRecord);" /> 
</Listeners> 
<LoadMask ShowMask="true" /> 
<SaveMask ShowMask="true" /> 
</ext:GridPanel> 
</ext:FitLayout> 
</Body> 
</ext:ViewPort> 
</div> 
</form> 
</body> 
</html> 

CustomerHandler.ashx

復(fù)制代碼代碼如下:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using Coolite.Ext.Web; 
namespace WebSPN.Controllers 
{ 
/// <summary> 
/// Summary description for $codebehindclassname$ 
/// </summary> 
//[WebService(Namespace = "http://tempuri.org/")] 
//[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
public class CustomerHandler : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string json = ""; 
var Request =context.Request; 
string action= Request["action"]; 
if (action == "query") 
{ 
Random rand=new Random(); 
int limit =int .Parse ( Request["limit"]); 
int start =int .Parse ( Request["start"]); 
IList<Customer> list = new List<Customer>(); 
for (int i = start; i < start + limit; i++) 
list.Add(new Customer 
{ 
CustomerID = "Customer" +i, 
Address = "Address" +i, 
City = "City" + rand.Next(1000), 
CompanyName = "Com" + rand.Next(1000), 
ContactName = "Contract" + rand.Next(1000), 
ContactTitle = "Title" + rand.Next(1000), 
Country = "Country" + rand.Next(1000), 
Email = rand.Next(1000) + "@live.com", 
Fax = rand.Next(1000).ToString() + rand.Next(1000), 
Mobile = rand.Next(1000).ToString() + rand.Next(1000), 
Notes = "Notes" + rand.Next(1000), 
Phone = "Phone" + rand.Next(1000), 
Region = "Region" + rand.Next(1000), 
TranDate =DateTime .Now .AddDays(rand.Next(30)) 
}); 
json= Coolite.Ext.Web.JSON.Serialize(list); 
json = "{data:" + json + ", totalCount:" + 100 + "}"; 
context.Response.Write(json); 
} 
else if (action == "save") 
{ 
//saving 
StoreDataHandler dataHandler = new StoreDataHandler( Request["data"]); 
ChangeRecords<Customer> data = dataHandler.ObjectData<Customer>(); 
foreach (Customer customer in data.Deleted) 
{ 
//db.Customers.Attach(customer); 
//db.Customers.DeleteOnSubmit(customer); 
} 
foreach (Customer customer in data.Updated) 
{ 
//db.Customers.Attach(customer); 
//db.Refresh(RefreshMode.KeepCurrentValues, customer); 
} 
foreach (Customer customer in data.Created) 
{ 
//db.Customers.InsertOnSubmit(customer); 
} 
//db.SubmitChanges(); 
Response sr = new Response(true); 
sr.Success = true; 
sr.Write(); 
} 
else if (action == "contact") 
{ 
string query = Request["query"]??""; 
json = "[{Name:'Bruce Lee query:"+query +"',Desc:'skjfkasjdkf'},{Name:'zzz',Desc:'sffffkf'},{Name:'ssse',Desc:'zzzzzzasjdkf'},"+ 
"{Name:'Bruce Lee" + DateTime.Now + "',Desc:'skzzjdkf'},{Name:'zzz',Desc:'sffffkf'},{Name:'ssse',Desc:'zzzzzzasjdkf'}," + 
"{Name:'Bruce Lee',Desc:'" + DateTime.Now + "'},{Name:'zzz',Desc:'sffffkf'},{Name:'ssse',Desc:'zzzzzzasjdkf'}" + 
"]"; 
json = "{data:" + json + ", totalCount:" + 20 + "}"; 
context.Response.Write(json); 
} 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
} 
public partial class Customer 
{ 
public string CustomerID { get; set; } 
public string CompanyName { get; set; } 
public string ContactName { get; set; } 
public string ContactTitle { get; set; } 
public string Address { get; set; } 
public string City { get; set; } 
public string Region { get; set; } 
public string PostalCode { get; set; } 
public string Country { get; set; } 
public string Phone { get; set; } 
public string Fax { get; set; } 
public string Mobile { get; set; } 
public string Email { get; set; } 

public string WebPage { get; set; } 
public string Notes { get; set; } 
public DateTime TranDate { get; set; } 
} 
} 