Coolite Cool Study 1 在Grid中用ComboBox 来编辑数据

转载于 2010-04-15 14:57:00 发布 · 643 阅读

文章标签：

#ext #server #string #header #button #border

Coolite Toolkit EXt 专栏收录该内容

20 篇文章

订阅专栏

本文展示了如何使用 ExtJS 构建一个包含动态下拉列表编辑器的网格面板，详细介绍了配置 ComboBox 作为 GridPanel 列编辑器的过程，并提供了一个完整的示例代码。

关键代码：

<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，是不能直接配置模板的，所以模板要独立写：

<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>

再加上这个比较Cool的table样式就基本上完成了:

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; }

完整的代码：

<%@ 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> <mce:style type="text/css"></mce:style><mce:style type="text/css" mce_bogus="1"></mce:style><style type="text/css" mce_bogus="1" mce_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

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; } } }

source: http://blog.youkuaiyun.com/fengart/archive/2009/05/16/4191681.aspx