ExtJs Ajax的WCF服务 之 Ext.grid 控件显示

 这一次我们用WCF来替代WebService服务.

还是先创建一个WebApplication工程

添加Grid.htm文件,代码如下:

引用的ext-base.js,ext-all.js,resources/css/ext-all.css文件在www.extjs.com中能够下到

<! 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 >
     < title > 无标题页 </ title >

     < script  src ="/ExtJs/ext-base.js"  type ="text/javascript" ></ script >

     < script  src ="/ExtJs/ext-all.js"  type ="text/javascript" ></ script >

     < link  href ="/resources/css/ext-all.css"  rel ="stylesheet"  type ="text/css"   />
</ head >
< body >
     < div >
         < span  style ="float:left; margin:20px 10px 0px 20px"  id ="grid" ></ span >< span  style ="float:left; margin:20px 10px 0px 20px"  id ="group" ></ span >
     </ div >

     < script  type ="text/javascript" > ...
    <!--
    Ext.onReady(getValue);//onReady为页面加载时运行,参数为函数名
    
    function getValue()
    ...{
        GetWebServiceData();//读取数据
    }
    
    function GetWebServiceData()
    ...{    
        Ext.Ajax.request(
        ...{
            method:"get",
            url:"/testsvc.svc/GridsJson",
            success:ExtSuccess,
            headers:...{'Content-Type':'application/json;utf-8'}//在这里一定要指定头信息为json，否则将返回的是XML，而不是Json
        }
        )
    }
    
    //responseText返回的Json字符串为:
    //{"d":"{'source':[{'id':0,'gname':'综合网址','gchr':null,'gcharge_id':null,'gstatus_id':null,'gsystem_id':null,'gtype_id':null,'gdev':null,'gopt':null,'galias':'collects','gdate':null,'gdes':null,'gtags':null,'gimg':null,'gweb':null,'gimp_id':null,'gtel':null,'gemail':null,'createdxml':false},
    //                 {'id':10001,'gname':'春秋Q传','gchr':'C','gcharge_id':null,'gstatus_id':15,'gsystem_id':2,'gtype_id':6,'gdev':'金山软件','gopt':'金山软件','galias':'chunqiuqzhuan','gdate':null,'gdes':null,'gtags':'金山,2D,春秋,CQ,可爱','gimg':'','gweb':'http://cq.xoyo.com/','gimp_id':9,'gtel':'028-85437733-5','gemail':'-','createdxml':true},
    //                 {'id':10003,'gname':'刀Online','gchr':'D','gcharge_id':null,'gstatus_id':16,'gsystem_id':2,'gtype_id':6,'gdev':'韩国Inix Soft','gopt':'世界都','galias':'dao','gdate':null,'gdes':null,'gtags':'3D,PK,变身,战场,宠物','gimg':'','gweb':'http://www.kalonline.com.cn/','gimp_id':6,'gtel':'-','gemail':'kefu@kalonline.com.cn','createdxml':true},
    //                 {'id':10004,'gname':'风火之旅','gchr':'F','gcharge_id':null,'gstatus_id':15,'gsystem_id':2,'gtype_id':6,'gdev':'北京林果','gopt':'久游网','galias':'fenghuozhilv','gdate':null,'gdes':null,'gtags':'久游,3D,国战,祭炼,副本','gimg':'','gweb':'http://fj.9you.com/','gimp_id':6,'gtel':'021-61361878','gemail':'fj@staff.9you.com','createdxml':true},
    //                 {'id':10005,'gname':'封印传说','gchr':'F','gcharge_id':null,'gstatus_id':14,'gsystem_id':2,'gtype_id':6,'gdev':'韩国NFLAVOR','gopt':'雷穹网络','galias':'fenyingchuanshuo','gdate':null,'gdes':null,'gtags':'3D,宠物,摆摊,商城,封印','gimg':'','gweb':'http://fy.lqn.cn/','gimp_id':8,'gtel':'0535-2102808','gemail':'gamemaster@lqn.cn','createdxml':true},
    //                 {'id':10006,'gname':'龙影','gchr':'L','gcharge_id':null,'gstatus_id':13,'gsystem_id':2,'gtype_id':6,'gdev':'智艺网络','gopt':'智艺网络','galias':'anyingshenji','gdate':null,'gdes':null,'gtags':'3D,转职,地下城,MMORPG,PK','gimg':'','gweb':'http://www.52sol.com/','gimp_id':8,'gtel':'-','gemail':'-','createdxml':true},
    //                 {'id':10007,'gname':'飚车','gchr':'B','gcharge_id':null,'gstatus_id':16,'gsystem_id':2,'gtype_id':7,'gdev':'SEGA','gopt':'天纵网络','galias':'biaoche','gdate':null,'gdes':null,'gtags':'天纵,3D,SEGA,极速,牌照','gimg':'','gweb':'http://ctr.joyzone.com.cn/','gimp_id':15,'gtel':'021-61206611','gemail':'ctcs@joyzone.com.cn','createdxml':true},
    //                 {'id':10008,'gname':'华夏Ⅱ','gchr':'H','gcharge_id':null,'gstatus_id':17,'gsystem_id':2,'gtype_id':6,'gdev':'深圳网域','gopt':'深圳网域','galias':'huaxia2','gdate':null,'gdes':null,'gtags':'网域,2D,变身,战场,MMORPG','gimg':'','gweb':'http://www.huaxia2.com/','gimp_id':8,'gtel':'0755－26952799','gemail':'hx@szdomain.com','createdxml':true},
    //                 {'id':10009,'gname':'巨人','gchr':'J','gcharge_id':null,'gstatus_id':14,'gsystem_id':2,'gtype_id':6,'gdev':'巨人网络','gopt':'巨人网络','galias':'juren','gdate':null,'gdes':null,'gtags':'巨人,2.5D,MMORPG,任务,职业','gimg':'','gweb':'http://jr.ztgame.com/','gimp_id':7,'gtel':'021-61205656','gemail':'-','createdxml':true},
    //                 {'id':10010,'gname':'大话西游3','gchr':'D','gcharge_id':null,'gstatus_id':17,'gsystem_id':2,'gtype_id':6,'gdev':'网易','gopt':'网易','galias':'dahuaxiyou3','gdate':null,'gdes':null,'gtags':'网易,大话,2D,回合,宠物','gimg':'','gweb':'http://xy3.163.com/','gimp_id':8,'gtel':'020-83918161','gemail':'-','createdxml':true}]}"}
    
    function ExtSuccess(results)
    ...{       
        var jsonData = Ext.util.JSON.decode(results.responseText);        
        jsonData = Ext.util.JSON.decode(jsonData.d);//将返回的Json字符串转换为Json对象
        var reader=new Ext.data.JsonReader(
            ...{
            //totalProperty: "results",            
            //id: "id"
            root:"source" //构造元数据的数组由jsonData.source得到
            },[            
            //以下属性为source对象数组中每个对象的属性映射
            ...{name:'id'},             //id
            ...{name: 'gname'}          //如果name与mapping同名,可以省略mapping
            ]
        )
        
        //图表一 Start
        //生成元数据
         var store=new Ext.data.Store(...{
                reader:reader
            });
        store.loadData(jsonData);
        
        //现在配置列信息,列信息的dataIndex必须在reader的名字映射中有,例:{header:'姓名',sortable: true,dataIndex:'gname'}的gname必须在{name: 'gname'}中存在
        var col=new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(...{header:'序号',width:30}),//计算行数,无法映射
            ...{header:'ID',sortable: true,dataIndex:'id'},
            ...{header:'姓名',sortable: true,dataIndex:'gname'}      
        ]);
        
        //配置视图信息
        var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
        view.columnsText='列显示/隐藏';
        
        //现在我们有一个可用的grid了,别骄傲这只是第一步       
        var grid=new Ext.grid.GridPanel(...{
            //el:Ext.getBody(),//要存放绘制的表格的对象(方法一)
            renderTo:Ext.get('grid').dom,//要存放绘制的表格的对象(方法二)
            height:300,//不赋值为默认
            width:200,//不赋值为默认
            store:store,
            cm:col,
            view:view            
            });
        //grid.render();//绘制表格(方法一)，下面的分组有相同的三种用法
        //图表一 End
        
        
        //分组图表 Start
        //现在我们需要一个GroupingStore
        var gstore=new Ext.data.GroupingStore(...{
          reader:reader,
          groupField:'name',
          groupOnSort:true,
          sortInfo:...{field: 'id', direction: "ASC"} //使用GroupingStore时必须指定sort
          });
        gstore.loadData(jsonData);
        
        //扩展一下我们的grid,让他能分组当然会更酷一点    
        var ggrid = new Ext.grid.GridPanel(...{
                ds: gstore,
                cm:col,
                view: new Ext.grid.GroupingView(...{
                    forceFit:true,
                    sortAscText :'正序',
                    sortDescText :'倒序',
                    columnsText:'列显示/隐藏',
                    groupByText:'依本列分组',
                    showGroupsText:'分组显示',
                    groupTextTpl: '{text} ({[values.rs.length]} 条记录)'
                }),
                frame:true,
                width: 400,//不赋值为默认
                height: 600,//不赋值为默认
                collapsible: true,
                animCollapse: false,
                //renderTo:Ext.getBody()
                renderTo:Ext.get('group').dom
            });
        //分组图表 End
    }
     
    //-->
     </ script >

</ body >
</ html >

创建WCF文件testsvc.svc

using  System;
using  System.Linq;
using  System.Runtime.Serialization;
using  System.ServiceModel;
using  System.ServiceModel.Activation;
using  System.ServiceModel.Web;
using  Component;
using  WebApplication1.Dbml;
namespace  WebApplication1
... {
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class testsvc
    ...{
        // 添加 [WebGet] 属性以使用 HTTP GET
        [OperationContract]
        public void DoWork()
        ...{
            // 在此处添加操作实现
            return;
        }

        // 在此处添加更多操作并使用 [OperationContract] 标记它们
        [OperationContract]
        [WebGet(ResponseFormat=WebMessageFormat.Json)]
        public string GridsJson()
        ...{
            LinqToSqlDataContext db = new LinqToSqlDataContext();
            var sou = db.gameinfos.Select(n => n).Take(10);
            return sou.toJson();
        }
    }
}

创建扩展方法ExtendMethod.cs

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Text;
using  System.Web.Script.Serialization;
using  System.Collections;
using  System.Reflection;
namespace  Component
... {
    public static class ExtendMethod
    ...{
        /**//// <summary>
        /// 返回Json序列
        /// parms字典
        /// Key:Json对象名
        /// Value:Json对象值
        /// </summary>
        /// <param name="This"></param>
        /// <param name="parms">需要加入的对象</param>
        /// <returns></returns>
        public static string toJson(this object This,Dictionary<string,object> parms)
        ...{
            JavaScriptSerializer json = new JavaScriptSerializer();
            var ds = new ...{ source=This};
            

            Dictionary<object,object> dic = new Dictionary<object,object>();
            dic.Add("source",This);

            foreach (KeyValuePair<string, object> key in parms)
            ...{
                dic.Add(key.Key,key.Value);
            }            
            return json.Serialize(dic);
        }

        /**//// <summary>
        /// 返回Json序列
        /// parms:加入的对象将与this对象同级
        /// 未完成
        /// </summary>
        /// <param name="This"></param>
        /// <param name="parms">需要加入的对象</param>
        /// <returns></returns>
        public static string toJson(this object This, params object[] parms)
        ...{
            JavaScriptSerializer json = new JavaScriptSerializer();
            json.MaxJsonLength = int.MaxValue;
            Dictionary<string, object> dic = new Dictionary<string, object>();
            dic.Add("source", This);
            foreach (object i in parms)
            ...{
                Type t = i.GetType();
                PropertyInfo[] myproperties = t.GetProperties();
                dic.Add(myproperties[0].Name, myproperties[0].GetValue(i, null));
            }

            return json.Serialize(dic).Replace(""","'");
        }
    }
}

注释中已详细说明了代码的用途,在这里就不再讲解了!