【封装】WCF+LINQ+ExtJS做更简单的Grid

本系列文章列表

发布了[添砖加瓦]:ExtJS+WCF+LINQ打造全功能Grid一文后，得到了很多朋友的关注和支持，之后又更新了几次，导致那篇文章篇幅过长，有些朋友同时提到，这样一种编程方式，手写代码量过大，特别是extjs的代码量尤其繁重，极大的影响了对这种方式的尝试兴趣和信心。因为我也是首次学习ExtJs，在它的应用上，还不能做到得心应手的状态，因此这几天，我又对上篇文章中的实现进行了一次全面的重构。这次重构主要的目的在于：

整理原来比较凌乱的代码
通过封装，极大减少ExtJs代码量
让客户端脚本框架extjs与wcf进行更好一些的交互

其实，我写这系列的文章，并不是很看重Extjs漂亮的外观，我是觉得Extjs是一款非常不错的Ajax框架，封装的比较完整，所以最终选择了Extjs，但我更希望通过extjs与wcf的这种交互和封装，能同样应用到其他优秀的ajax框架上，比如jquery,asp.net ajax上。我个人认为，这几篇文章虽然浅显，但绝对不是简单的牛刀小试，也不是图用几种新技术来哗众取宠，我更多的希望更多人能参与和支持这种开发模式中来。因为比起webform，我觉得它更有型！

如果，您是第一次看本文，最好还是能阅读一下上一篇[添砖加瓦]:ExtJS+WCF+LINQ打造全功能Grid，因为它与本文密切相关。

先来看下封装好的Extjs Grid有什么特性：

分页查询
排序
多字段筛选
Excel导出，包括单页导出和全部导出两种
多选列
批量删除
批量更新
添加新记录
清除筛选，重新查询

说完特性，再来看看这次封装的效果如何：

屏蔽了对Extjs中Store,Proxy,Reader等Compent,可以直接通过设置svcUrl，不必再关心ExtJs与WCF到底的交互细节
使用这个Grid使得我们在开发WCF服务的时候，有了一个模式，相当于定义好了接口，使得服务的开发工作更有规律可循

接下来，我们来看下封装的Grid有哪些新的特性

配置选项	说明
svcUrl：String	该选项用于指明用于和Extjs的WCF服务地址
dataFields：Ext.data.Record	该选项用于设定与WCF交互行记录的数据结构，相当于Asp.Net 中GridView的每一行中的DataItem
dataKey：String	设置数据记录的主键属性，相当于Asp.Net中的GridView的DataKeys
sortInfo：String	默认的排序表达式
pageSize：Number	每页的最大记录数
gridFormEl：String	在更新，删除等提交操作中的form，所以必须要求页面拥有至少一个<form>，而此处设置该form的id的值，比如页面中有<form id=’form1’ ..，那此处就可以设置为’form1’
gridFormFiled：String	仍然是在数据提交的过程中需要的表单，在页面中至少含有一个，可以设定为隐藏，可以看做Asp.Net中的ViewState，该处的值为表单的id
addPanel：Ext.FormPanel	添加新记录的表单比较灵活，所以需要单独进行设计，并设定给该选项

上面的几个选项，都是必须的，一个简单的例子如下：

//创建可编辑Grid对象
var grid = new App.JillzhangGrid({
svcUrl:'service/PageGridService.svc',
sortInfo:{field: "ProductID", direction: "DESC"},
dataKey:'ProductID',
dataFields:product,
pageSize:25,
gridFormEl:'form1',
gridFormFiled:'data',
addPanel:addForm,
renderTo:'page-grid',
cm:cm,
sm:sm2,
//设置Name列为大小自适应
autoExpandColumn: 'Name',
height:400,
width:600,
//自定义控件
plugins:[checkColumn,filters],
title:'产品信息'
});

具体使用，可以参考实例项目，打开实例，原来的代码至少能减少85%。

而对于服务的WCF，也有了比较好的模式，根据功能，我们需要在相应的WCF服务中实现如下的方法

方法	备注
Select	用于分页有排序插叙
Delete	用于批量删除
Add	用于添加新记录
Update	用于批量更新
ExportExcel	导出Excel-全部数据
PageExportExcel	导出Excel:只导出当前页