Coolite Cool Study 1 在Grid中用ComboBox 来编辑数据- ASP.NET

当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > Coolite Cool Study 1 在Grid中用ComboBox 来编辑数据

ASP.NET: 不同映射模式下的直线输出的效果问题; ASP.NET开发下的MVC设计模式的实现; ASP.NET编写应用程序的十大技巧; ASP.NET中使用AJAX的简单方法; ASP.NET MVC实现自己的视图引擎; 认识asp.net会话状态; ASP.NET实现页面传值的几种方法; .NET中容易混淆的几组重要概念; 详解.NET中的动态编译技术; 如何使用ASP.Net加密Cookie; ASP.NET 2.0跨网页提交的三种方法; ASP.NET 2.0创建母版页引来的麻烦; .Net整合其他平台的一些探讨; ASP.NET编程经验技巧10则; 最佳实践 ADO.NET实用经验无保留曝光; 在.NET上执行多线程操作要考虑的两大因素; .Net开发细说Visual Basic.Net; ASP.NET网络编程中经常用到的27个函数集; ASP.NET防止用户多次登录的方法; 对ASP.NET MVC项目中的视图做单元测试

No. « ‹ 76 77 78 79 › »

技术文章搜索

关键字

ASP.NET 中的 Coolite Cool Study 1 在Grid中用ComboBox 来编辑数据

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-11 浏览: 217 ::

收藏到网摘: n/a

asp.net Coolite 学习交流 Coolite Cool Study 2 同时更新多个Tab

作为Coolite的第一个教程，我想展现给大家能够体现Coolite强大的例子（当然也比官方例子稍微复杂一点）。官方有一个关于Grid CURD 的例子：http://examples.coolite.com/Examples/GridPanel/WebService_Connections/HandlerUsing/ 我在其基础上稍微修改一下，用ComboBox作为Grid的Editor：

先show一下效果给大家坚持看下去的动力：

关键代码：

复制代码代码如下:

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

Enjoy yourself！
完整的代码：
Html

复制代码代码如下:

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

复制代码代码如下:

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

asp.net Coolite 学习交流 Coolite Cool Study 2 同时更新多个Tab

ASP.NET 中的 Coolite Cool Study 1 在Grid中用ComboBox 来编辑数据

评论 (0) All