發布了[添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid一文后，得到了很多朋友的關注和支持,之后又更新了幾次，導致那篇文章篇幅過長，有些朋友同時提到，這樣一種編程方式，手寫代碼量過大，特別是extjs的代碼量尤其繁重，極大的影響了對這種方式的嘗試興趣和信心。因為我也是首次學習ExtJs，在它的應用上，還不能做到得心應手的狀態，因此這幾天，我又對上篇文章中的實現進行了一次全面的重構。這次重構主要的目的在于： 1) 整理原來比較凌亂的代碼 2) 通過封裝，極大減少ExtJs代碼量 3) 讓客戶端腳本框架extjs與wcf進行更好一些的交互

本系列文章列表

1）Ajax訪問Xml Web Service的安全問題以及解決方案

2）Ajax與WCF交互-WCF之美

3) Ajax與Wcf交互-JSON

4) ExtJs與WCF交互:生成樹

5) 用ExtJs+Linq+Wcf打造簡單grid

6) ExtJs+WCF+LINQ實現分頁Grid

7) ExtJs與WCF之間的跨域訪問

8) 異步調用Restful的WCF服務

9) 用Restful方式調用WCF進行上傳下載

10) 再說ExtJs與WCF之間的跨域訪問

11) [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid

12) 【封裝】WCF+LINQ+ExtJS做更簡單的Grid

 

   發布了[添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid一文后，得到了很多朋友的關注和支持，之后又更新了幾次，導致那篇文章篇幅過長，有些朋友同時提到，這樣一種編程方式，手寫代碼量過大，特別是extjs的代碼量尤其繁重，極大的影響了對這種方式的嘗試興趣和信心。因為我也是首次學習ExtJs，在它的應用上，還不能做到得心應手的狀態，因此這幾天，我又對上篇文章中的實現進行了一次全面的重構。這次重構主要的目的在于：

1. 整理原來比較凌亂的代碼
2. 通過封裝，極大減少ExtJs代碼量
3. 讓客戶端腳本框架extjs與wcf進行更好一些的交互

其實，我寫這系列的文章，并不是很看重Extjs漂亮的外觀，我是覺得Extjs是一款非常不錯的Ajax框架，封裝的比較完整，所以最終選擇了Extjs，但我更希望通過extjs與wcf的這種交互和封裝，能同樣應用到其他優秀的ajax框架上，比如jquery,asp.net ajax上。我個人認為，這幾篇文章雖然淺顯，但絕對不是簡單的牛刀小試，也不是圖用幾種新技術來嘩眾取寵，我更多的希望更多人能參與和支持這種開發模式中來。因為比起webform，我覺得它更有型！

    如果，您是第一次看本文，最好還是能閱讀一下上一篇[添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid，因為它與本文密切相關。

   先來看下封裝好的Extjs Grid有什么特性：

1. 分頁查詢
2. 排序
3. 多字段篩選
4. Excel導出，包括單頁導出和全部導出兩種
5. 多選列
6. 批量刪除
7. 批量更新
8. 添加新記錄
9. 清除篩選，重新查詢

說完特性，再來看看這次封裝的效果如何：

1. 屏蔽了對Extjs中Store,Proxy,Reader等Compent,可以直接通過設置svcUrl，不必再關心ExtJs與WCF到底的交互細節
2. 使用這個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:只導出當前頁

  

服務代碼比較長，可以到實例項目中參考

下面貼幾張截圖來結束本文：

 

實例項目：https://files.cnblogs.com/jillzhang/ExtJs_Wcf_Linq_PageGrid_0818.rar

 

最后,熱烈祝賀中國乒乓球男隊獲得團體冠軍，王浩，馬琳，王力勤，劉國梁教練都是我們的英雄，為他們的勝利歡呼，為他們下面的比賽加油！ 

 

本系列文章列表

1）Ajax訪問Xml Web Service的安全問題以及解決方案

2）Ajax與WCF交互-WCF之美

3) Ajax與Wcf交互-JSON

4) ExtJs與WCF交互:生成樹

5) 用ExtJs+Linq+Wcf打造簡單grid

6) ExtJs+WCF+LINQ實現分頁Grid

7) ExtJs與WCF之間的跨域訪問

8) 異步調用Restful的WCF服務

9) 用Restful方式調用WCF進行上傳下載

10) 再說ExtJs與WCF之間的跨域訪問

11) [添磚加瓦]:ExtJS+WCF+LINQ打造全功能Grid

12) 【封裝】WCF+LINQ+ExtJS做更簡單的Grid