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

ASP.NET
FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用方法
.NET 常用功能和代码小结
在 .NET Framework 2.0 中未处理的异常导致基于 ASP.NET 的应用程序意外退出
asp.net IList查询数据后格式化数据再绑定控件
asp.net sql存储过程
asp.net 简单实现禁用或启用页面中的某一类型的控件
asp.net(c#)获取内容第一张图片地址的函数
The remote procedure call failed and did not execute的解决办法
ASP.NET 在线文件管理
asp.net 读取并修改config文件实现代码
ASP.NET Cookie 操作实现
asp.net Silverlight中的模式窗体
Silverlight中动态获取Web Service地址
asp.net Silverlight应用程序中获取载体aspx页面参数
asp.net 水晶报表隔行换色实现方法
asp.net 获取Gridview隐藏列的值
手动把asp.net的类生成dll文件的方法
asp.net 使用ObjectDataSource控件在ASP.NET中实现Ajax真分页
动态指定任意类型的ObjectDataSource对象的查询参数
asp.net Md5的用法小结

No. « 164 165 166 167 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-11   浏览: 200 ::
收藏到网摘: n/a

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