![](/images/cnblogs_com/jillzhang/wcf.png)
用ExtJs+Linq+Wcf打造简单grid
上篇文章ExtJs与WCF交互:生成树中阐述了用wcf产生json数据给extjs产生树控件的用法,本文将着重讲述如何用wcf+extjs+linq打造一个支持排序和列刷选的grid
上篇文章ExtJs与WCF交互:生成树中阐述了用wcf产生json数据给extjs产生树控件的用法,本文将着重讲述如何用wcf+extjs+linq打造一个支持排序和列刷选的grid。闲话少叙 ,下面是操作步骤和实现效果图
第一步:在vs2008中创建一个支持.net framework 3.5的网站,此处之所以强调支持.net framework 3.5是为了使用linq
第二步:将运行时需要的Extjs的资源文件拷贝到项目目录,具体可见示例项目
第三步:假设在本机sql2005中存在数据库sharelist,里面有一个数据表stocks,效果如下:
数据库文件sharelist.mdf在示例项目db文件夹中。如果需要测试,可以将其附加到自己的sql2005数据库服务器中。
在网站项目中创建一个Linq To Sql类:DataClasses.dbml,方法如下如所示:
点击添加之后,出现下面的Linq To Sql向导
在本文只使用左面面板,在服务器资源管理器中添加对数据库sharelist的连接,效果如下:
点击数据表stocks,然后拖动stocks数据表到左面面板,拖动后效果如下:
点击stocks,然后更改类名称为Stock:
更改后效果为:
好,到此我们基本完成了linq to sql类的设计,我们在解决方案管理器中打开生成的类代码文件中,其中包括类:Stock ,为了使其能够被WCF使用
,对类添加DataContractAttribute,对属性添加DataMemberAttribute,添加好之后的代码为:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
linq to sql类生成的代码并添加了wcf支持
#pragma warning disable 1591
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//------------------------------------------------------------------------------
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// <auto-generated>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// 此代码由工具生成。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// 运行库版本:2.0.50727.1433
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// 对此文件的更改可能会导致不正确的行为,并且如果
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// 重新生成代码,这些更改将会丢失。
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
// </auto-generated>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
//------------------------------------------------------------------------------
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Collections.Generic;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.ComponentModel;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Data;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Data.Linq;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Data.Linq.Mapping;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Linq;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Linq.Expressions;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Reflection;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[System.Data.Linq.Mapping.DatabaseAttribute(Name="sharelist")]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
public partial class DataClassesDataContext : System.Data.Linq.DataContext
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private static System.Data.Linq.Mapping.MappingSource mappingSource = new AttributeMappingSource();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
Extensibility Method DefinitionsExtensibility Method Definitions#region Extensibility Method Definitions
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
partial void OnCreated();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
#endregion
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public DataClassesDataContext() :
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base(global::System.Configuration.ConfigurationManager.ConnectionStrings["sharelistConnectionString"].ConnectionString, mappingSource)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
OnCreated();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public DataClassesDataContext(string connection) :
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base(connection, mappingSource)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
OnCreated();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public DataClassesDataContext(System.Data.IDbConnection connection) :
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base(connection, mappingSource)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
OnCreated();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public DataClassesDataContext(string connection, System.Data.Linq.Mapping.MappingSource mappingSource) :
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base(connection, mappingSource)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
OnCreated();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public DataClassesDataContext(System.Data.IDbConnection connection, System.Data.Linq.Mapping.MappingSource mappingSource) :
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
base(connection, mappingSource)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
OnCreated();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public System.Data.Linq.Table<Stock> Stock
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
get
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return this.GetTable<Stock>();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[Table(Name="dbo.stocks")]
[DataContract]
public partial class Stock
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private string _company;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private double _price;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private double _change;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private double _changepercent;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
private System.DateTime _lastupdated;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public Stock()
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
[Column(Storage="_company", DbType="NVarChar(50) NOT NULL", CanBeNull=false)]
[DataMember]
public string company
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
get
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return this._company;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ((this._company != value))
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._company = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
[Column(Storage="_price", DbType="Float NOT NULL")]
[DataMember]
public double price
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
get
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return this._price;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ((this._price != value))
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._price = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
[Column(Storage="_change", DbType="Float NOT NULL")]
[DataMember]
public double change
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
get
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return this._change;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ((this._change != value))
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._change = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
[Column(Storage="_changepercent", DbType="Float NOT NULL")]
[DataMember]
public double changepercent
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
get
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return this._changepercent;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ((this._changepercent != value))
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._changepercent = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
[Column(Storage="_lastupdated", DbType="DateTime NOT NULL")]
[DataMember]
public System.DateTime lastupdated
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
get
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return this._lastupdated;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
set
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
if ((this._lastupdated != value))
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
this._lastupdated = value;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
#pragma warning restore 1591
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
第四步:在网站项目中创建一个启用了Ajax的WCF服务:ArrayGridService.svc,然后将其中的类代码更改为:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Linq;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Runtime.Serialization;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.ServiceModel;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.ServiceModel.Activation;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.ServiceModel.Web;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
using System.Collections.Generic;
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[ServiceContract(Namespace = "")]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
public class ArrayGridService
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 添加 [WebGet] 属性以使用 HTTP GET
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
[OperationContract]
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
[WebInvoke(ResponseFormat = WebMessageFormat.Json, Method = "GET", UriTemplate = "GetStocks")]
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
public Stock[] GetStocks()
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
DataClassesDataContext dbContext = new DataClassesDataContext();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
IQueryable<Stock> res = dbContext.Stock.Select(stock => stock);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return res.ToArray<Stock>();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// 在此处添加更多操作并使用 [OperationContract] 标记它们
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
在页面文件中,在<%@ ServiceHost中添加Factory="System.ServiceModel.Activation.WebServiceHostFactory",然后在web.config中将<enableWebScript/>替换成为<webHttp/>,注意这两个操作是必须的。到此wcf服务也准备齐备。
第五步:创建一个BasicGrid.aspx,然后在页面中添加extjs必要的链接和脚本支持,并添加页面元素,完成后的代码为:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
BasicGrid.aspx页面文件
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="BasicGrid.aspx.cs" Inherits="BasicGrid" %>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<html xmlns="http://www.w3.org/1999/xhtml">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<head runat="server">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<title>extjs+wcf+linq 打造grid</title>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<script type="text/javascript" src="adapter/ext/ext-base.js" charset="gb2312"></script>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<script type="text/javascript" src="ext-all.js" charset="gb2312"></script>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<script type="text/javascript" src="array-grid.js" charset="gb2312"></script>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<link rel="stylesheet" type="text/css" href="shared/examples.css" />
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<script type="text/javascript" src="shared/examples.js" charset="gb2312"></script>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</head>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<body>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<form id="form1" runat="server">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<div>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<h1>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
extjs+wcf+linq 打造grid</h1>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<div id="grid-example">
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</div>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</div>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</form>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</body>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</html>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
页面中有对<script type="text/javascript" src="array-grid.js" charset="gb2312"></script>,其中的array-grid.js便是产生grid所需要的脚本,它访问上一步中开发好的wcf服务,将服务方法GetStocks返回的json数据与extjs的grid进行绑定,具体代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
ExtJs与Wcf交互生成grid的脚本代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//**//**//*
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
* Ext JS Library 2.1
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
* Copyright(c) 2006-2008, Ext JS, LLC.
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
* licensing@extjs.com
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
*
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
* http://extjs.com/license
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
*/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.onReady(function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// example of custom renderer function
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function change(val)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(val > 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return '<span style="color:green;">' + val + '</span>';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if(val < 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return '<span style="color:red;">' + val + '</span>';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return val;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// example of custom renderer function
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function pctChange(val)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(val > 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return '<span style="color:green;">' + val + '%</span>';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if(val < 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return '<span style="color:red;">' + val + '%</span>';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return val;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var proxy=new Ext.data.HttpProxy(
{url:'ArrayGridService.svc/GetStocks'});
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// create the data store
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var store = new Ext.data.SimpleStore(
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
fields: [
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'company'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'price', type: 'float'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'change', type: 'float'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'pctChange', type: 'float'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
]
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
});
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//定义reader
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var reader=new Ext.data.JsonReader(
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
},[
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'company'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'price'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'change'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'pctChange',mapping:'changepercent'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'lastChange',mapping:'lastupdated'}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
]
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//构建Store
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var store=new Ext.data.Store(
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
proxy:proxy,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
reader:reader
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
});
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//载入
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
store.load();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// create the Grid
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var grid = new Ext.grid.GridPanel(
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
store: store,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
columns: [
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{id:'company',header: "公司", width: 160, sortable: true, dataIndex: 'company'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{header: "单价", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{header: "变动", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{header: "变动百分比", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{header: "最后更新", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('Y年m月d日'), dataIndex: 'lastChange'}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
],
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
stripeRows: true,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
autoExpandColumn: 'company',
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
height:350,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
width:600,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
title:'股市行情',
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
viewConfig:
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
columnsText:'列',
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
sortAscText:'升序',
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
sortDescText:'降序'
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
});
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
grid.render('grid-example');
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
grid.getSelectionModel().selectFirstRow();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
});
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
到此,linq部分,wcf部分,extjs部分均开发完成。
第五步:在浏览器中浏览BasicGrid.aspx,效果图如下:
说明大功告成。
说明:这几篇都是简单的实践,有关extjs部分绝大部分参考extjs中的示例,但也做了稍稍的修改,后面的文章会逐渐深入一些。
示例项目:
/Files/jillzhang/ExtJsWcfLinqGrid.part1.RAR
/Files/jillzhang/ExtJsWcfLinqGrid.part2.RAR