Ext的表格控件如何绑定

1. XML数据源

假设我们有一个数据源是以XML的形式存在的，我们需要从里面取出数据并绑定在界面。XML的结构如下： 

 

< students >   < stu >   < age > 15 </ age >   < name > 奥特曼 </ name >   < hobby > 打小怪兽 </ hobby >   </ stu >   < stu >   < age > 13 </ age >   < name > 孙悟空 </ name >   < hobby > 吃桃子 </ hobby >   </ stu >   < stu >   < age > 100 </ age >   < name > 石曼迪 </ name >   < hobby > 睡觉 </ hobby >   </ stu >   </ students >

 

其绑定部分代码比上节的简单多了，最少不用定义数据源了，只需要告诉Ext要的数据在哪里去取即可，实现代码如： 

 

// 解析数据源  var  ds  =   new  Ext.data.Store({  url:  ' student.xml ' ,  reader:  new  Ext.data.XmlReader({record: ' stu ' }, [  { name:  ' age '  }, { name:  ' name '  }, { name:  ' hobby '  }  ])  });  ds.load();

 

url：指定XML文件的存放位置，写相对路径。然后需要把读取器换成XmlReader，并在第一个参数里面告诉Ext开始解析的每条数据的根节点，根据本文提供的XML文件，每条数据的根节点是“stu”，后面的就不用解释了，和前面的一样。

效果如：

最后需要注意的是，本例包括以后的例子需要部署到服务器上运行，才能出现结果，不能双击网页文件查看效果，因为要和服务器交互。

2. JSON格式数据

首先得明白什么是JSON格式，json是js本身的一种数据格式，他是数据存储中最快的一种格式，现在已经广泛应用于互联网产品中，如腾讯的开心农场，数据传输就用的是json。

josn的数据组织结构{key:value,key1:value1,...n}，比较难懂，一般各种语言都提供了json转换方法，可以直接调用，省的大家拼字符串。

下面举例说明json的写法，拿一个一组数据为例： 

 

{data: [  {projectId:  100 , project:  ' Ext表单基本知识 ' , due: ' 06/24/2010 ' },  {projectId:  102 , project:  ' Ext表格基本知识 ' , due: ' 07/11/2010 ' },  {projectId:  102 , project:  ' Ext还可以汇总 ' , due: ' 07/15/2010 ' }  ]}

 

最外层是一对花括弧表示数据开始和结束，里面有一个节点叫“data”表示根结点，后面跟“[]”表示子节点的数据，再里面就是具体的键值对数据表示形式了，每个数据用英文逗号隔开，每条数据都用花括弧括起来。

然后我们来解析他，根据我们上节所说，现在的数据源变成json格式，那么解析器也得变成JsonReader，只需要改动这一处即可，修改后的代码如下： 

 

< script type = " text/javascript " >   function  GridBasic() {  // 定义表格  var  cm  =   new  Ext.grid.ColumnModel([  { header:  ' 项目标号 ' , dataIndex:  ' projectId '  },  { header:  ' 项目描述 ' , dataIndex:  ' project '  },  { header:  ' 项目时间 ' , dataIndex:  ' due '  }  ]);  // 解析数据源  var  ds  =   new  Ext.data.Store({  url:  ' Test.json ' ,  reader:  new  Ext.data.JsonReader({ root:  ' data '  }, [ ' projectId '  , ' project '  ,  ' due '  ])  });  ds.load();  // 装配表格  var  grid  =   new  Ext.grid.GridPanel({  el:  ' grid ' ,  ds: ds,  cm: cm,  height: 200 ,  width: 500   });  grid.render();  }  Ext.onReady(GridBasic);  // 开始执行  < / script>

 

最终运行效果如：

3. 使用动态语言绑定

PHP：

PHP本身就有处理函数：json_encode（数组）使用的时候只需把数据库中查询出来的数据已数组形式传递进去，然后输出即可，实现代码如： 

 

<? php  $arr = array (  0 => array ( ' name ' => ' 孔雀 ' , ' age ' => ' 88 ' , ' adr ' => ' 道观 ' ) ,   1 => array ( ' name ' => ' 奥特曼 ' , ' age ' => ' 150 ' , ' adr ' => ' 火星 ' ) ,   2 => array ( ' name ' => ' 石曼迪 ' , ' age ' => ' 18 ' , ' adr ' => ' 地球 ' ) ,   3 => array ( ' name ' => ' 闹闹 ' , ' age ' => ' 28 ' , ' adr ' => ' 山东 ' ) ,   );  echo   ' {data: ' . json_encode( $arr ) . ' } ' ;  ?>

 

前台页面也只需要更改数据源为输出数据的文件名即可，完整代码如： 

 

< script type = " text/javascript " >   function  GridBasic() {  // 定义表格  var  cm  =   new  Ext.grid.ColumnModel([  { header:  ' 项目标号 ' , dataIndex:  ' name '  },  { header:  ' 项目描述 ' , dataIndex:  ' age '  },  { header:  ' 项目时间 ' , dataIndex:  ' adr '  }  ]);  // 解析数据源  var  ds  =   new  Ext.data.Store({  url:  ' test.php ' ,  reader:  new  Ext.data.JsonReader({ root:  ' data '  }, [ ' name '  , ' age '  ,  ' adr '  ])  });  ds.load();  // 装配表格  var  grid  =   new  Ext.grid.GridPanel({  el:  ' grid ' ,  ds: ds,  cm: cm,  height: 200 ,  width: 500   });  grid.render();  }  Ext.onReady(GridBasic);  // 开始执行  < / script>

 

和前面学习过的基本一样。

绑定结果如：

ASP.NET：

使用asp.net就更简单了，传统的asp.net直接在提供数据的页面的page_load事件下输出即可，使用asp.net内置的处理对象JavaScriptSerializer，使用方法如：新建一个提供数据用的页面data.aspx，在后台写上如下代码： 

 

using  System;  using  System.Collections.Generic;  using  System.Linq;  using  System.Web;  using  System.Web.UI;  using  System.Web.UI.WebControls;  using  System.Web.Script.Serialization; 
public   partial   class  data : System.Web.UI.Page  {  protected   void  Page_Load( object  sender, EventArgs e)  {  List < Student >  students  =   new  List < Student >  {  new  Student { Id  =   1 , Name  =   " 孔雀 " , Adr  =   " 道观 "  } ,  new  Student { Id = 2 , Name = " 闹闹 " , Adr = " 山¦东 " },  new  Student { Id = 1 , Name = " 石曼迪 " , Adr = " 地球 " }  };  JavaScriptSerializer j  =   new  JavaScriptSerializer();  Response.Write(j.Serialize(students));  Response.End();  }  } 
public   class  Student  {  public   int  Id {  get ;  set ; }  public   string  Name {  get ;  set ; }  public   string  Adr {  get ;  set ; }  }

 

在接受页面的前台协商EXT代码即可： 

 

< script type = " text/javascript " >   function  GridBasic() {  // 定义表格  var  cm  =   new  Ext.grid.ColumnModel([  { header:  ' 姓名 ' , dataIndex:  ' Name '  },  { header:  ' 编号 ' , dataIndex:  ' Id '  },  { header:  ' 地址 ' , dataIndex:  ' Adr '  }  ]);  // 解析数据源  var  ds  =   new  Ext.data.Store({  url:  ' data.aspx ' ,  reader:  new  Ext.data.JsonReader({ }, [ ' Name ' ,  ' Id ' ,  ' Adr ' ])  });  ds.load();  // 装配表格  var  grid  =   new  Ext.grid.GridPanel({  el:  ' grid ' ,  ds: ds,  cm: cm,  height:  200 ,  width:  500   });  grid.render();  }  Ext.onReady(GridBasic);  // 开始执行  < / script>

 

最终运行效果如：

ASP.NET MVC：

Asp.net mvc作为微软最新推出的架构模式，已经在各个行业逐步应用起来了，由于它采用的不是传统的服务器控件-事件模式，改变以往服务器端运行模式，采用表单提交方式，故而非常有利于测试和请求控制，没了以往那么多的控件，表格必须得手写代码循环绑定，我们也举一个MVC的例子来说明数据绑定吧。

先使用VS2010创建一个MVC项目，在view下面的share里面的Site.Master里面添加对Ext的引用。然后在model里面增加一个返回集合的方法，最后在Index对应的Controller里面增加json的输出方法，然后在view里Index对应的视图上配置数据源即可。

Model对应的代码如： 

 

using  System;  using  System.Collections.Generic;  using  System.Linq;  using  System.Web;  namespace  Ext_aspnet_MVC.Models  {  public   class  Student  {  public   int  Id {  get ;  set ; }  public   string  Name {  get ;  set ; }  public   string  Adr {  get ;  set ; }  } 
public   class  StudentModel  {  public  List < Student >  GetAll()  {  List < Student >  students  =   new  List < Student >  {  new  Student { Id  =   1 , Name  =   " 孔雀 " , Adr  =   " 道观 "  } ,  new  Student { Id = 2 , Name = " 闹闹 " , Adr = " 山¦东 " },  new  Student { Id = 1 , Name = " 石曼迪 " , Adr = " 地球 " }  };  return  students;  }  }  }

 

Controller对应的代码如： 

 

public  JsonResult GetData()  {  StudentModel stu  =   new  StudentModel();  List < Student >  s  =  stu.GetAll();  return  Json( new  { data  =  s}, JsonRequestBehavior.AllowGet);  }

 注：MVC2出于对网站数据的保护，默认禁止通过get的请求返回JsonResult数据，你可以在返回Json时，传入第二个参数 JsonRequestBehavior.AllowGet。

View对应的代码如： 

 

< script type = " text/javascript " >   function  GridBasic() {  // 定义表格  var  cm  =   new  Ext.grid.ColumnModel([  { header:  ' 姓名 ' , dataIndex:  ' Name '  },  { header:  ' 编号 ' , dataIndex:  ' Id '  },  { header:  ' 地址 ' , dataIndex:  ' Adr '  }  ]);  // 解析数据源  var  ds  =   new  Ext.data.Store({  url:  ' Home/GetData ' ,  reader:  new  Ext.data.JsonReader({ root:  ' data '  }, [ ' Name ' ,  ' Id ' ,  ' Adr ' ])  });  ds.load();  // 装配表格  var  grid  =   new  Ext.grid.GridPanel({  el:  ' grid ' ,  ds: ds,  cm: cm,  height:  200 ,  width:  500   });  grid.render();  }  Ext.onReady(GridBasic);  // 开始执行  < / script>

 

最终的效果如：

 

 

 

页是Ext自带的一个工具条功能，需要此功能时，可以打开设置相应的参数即可，后台查询数据的方式和传统方式相同，可以使用分页SQL，也可以使用分页存储过程，将查询到的数据以json的形式输出即可。

附：json格式示例：

{ " data " :[{ " Id " : 1 , " Name " : " 闹闹 " , " Adr " : " 玉虚宫 " },{ " Id " : 2 , " Name " : " 宝宝 " , " Adr " : " 飘渺之界 " },{ " Id " : 3 , " Name " : " 孔雀 " , " Adr " : " 犀牛贺州 " },{ " Id " : 4 , " Name " : " 石曼迪 " , " Adr " : " 北极寒州 " },{ " Id " : 5 , " Name " : " 魔法师 " , " Adr " : " 未知大陆 " }], " totalCount " : 16 }

 

 

这个是带分页输出的json样本，意思是后台程序要做的仅仅只是将要展示的数据构建成json也就是Ext认识的格式，然后告诉前台去哪里获取这些数据即可。而构建方式每种语言各有不同，基本都提供了转换的方法或组件。PHP中有json_encode，JAVA中有JSONArray，JSONObject等，C#提供了JavaScriptSerializer和MVC中的Json方法，都可以构建出合法的json格式。如本例中的asp.net就是这么构建的：

public   partial   class  data : System.Web.UI.Page  {  protected   void  Page_Load( object  sender, EventArgs e)  {  int  start  =  Convert.ToInt32(Request.QueryString[ " start " ]); // 接受前台传递过来的分页起始条件  int  limit  =  Convert.ToInt32(Request.QueryString[ " limit " ]); // 接受前台传递过来的分页记录条数  StudentDAL sc  =   new  StudentDAL();  List < StudentInfo >  students  =  sc.GetData(start, limit); // 调用查询方法  JavaScriptSerializer j  =   new  JavaScriptSerializer(); // 实例化字符串格式化对象  string  result  =   " {\ " totalCount\ " : "   +  sc.GetCount()  +   " ,\ " data\ " : "   +  j.Serialize(students)  +   " } " ;  Response.Write(result);  Response.End();  }  }

 

 

本段代码中用到的JavaScriptSerializer需要引入命名空间using System.Web.Script.

Serialization;方可使用。

同样，asp.net MVC中将集合转换为json的代码以及如Json方法的使用如：

public  JsonResult GetData()  {  int  start  =  Convert.ToInt32(Request.QueryString[ " start " ]);  int  limit  =  Convert.ToInt32(Request.QueryString[ " limit " ]);  StudentModel stu  =   new  StudentModel();  List < Student >  s  =  stu.GetData(start, limit);  return  Json( new  { data  =  s, totalCount  =  stu.GetCount() }, JsonRequestBehavior.AllowGet);  }

 

 

本段代码需要解释两点：

1. 这个动作的返回值是JsonResult类型，属于Controller 提供了众多的方法让我们返回各种类型的 ActionResult中的一种，其他的返回值类型如下图所示：

2. 默认情况下使用JsonResult作为返回值会报下面的异常：System.InvalidOperationException: This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.

由错误信息可知MVC2出于对网站数据的保护，默认禁止通过get的请求返回JsonResult数据，你可以在返回Json时，传入第二个参数 JsonRequestBehavior.AllowGet，如：return Json(result, JsonRequestBehavior.AllowGet)。

OK，后台的输出工作完成了，下来就看前台怎么接收和显示了。不管后台框架如何变化，前台的显示和解析是一样的，需要指定数据从何获取，以什么样的方式获取，对应的字段显示在对应的列标题中，如果需要分页的话还得把分页控件显示出来，然后传入分页参数。

先看解析数据源：

// 解析数据源  var  ds  =   new  Ext.data.Store({  proxy:  new  Ext.data.HttpProxy({  url:  ' data.aspx ' ,  dataType:  ' json ' ,  method:  ' GET '   }),  reader:  new  Ext.data.JsonReader({ root:  ' data ' , totalProperty:  ' totalCount '  }, Ext.data.Record.create([  { name:  ' Id ' , mapping:  ' Id '  },  { name:  ' Name ' , mapping:  ' Name '  },  { name:  ' Adr ' , mapping:  ' Adr '  }  ]))  });

 

 

HttpProxy 使用 HTTP 协议，通过 Ajax 去后台取数据，构造它时需要设置 url等参数。Reader中用的是JsonReader表示用什么方式去解析，参数中的root意思是内容部分从哪个节点开始解析，totalProperty表示总的记录数是多少，用于分页计算，这两个参数是平行关系。再往后的代码就是映射关系了。

解析完数据源，就需要按照要求装配表格了，需要这次装配的时候记得显示分页条：

// 装配表格  var  grid  =   new  Ext.grid.GridPanel({  el:  ' grid ' ,  ds: ds,  cm: cm,  height:  200 ,  width:  500 ,  bbar:  new  Ext.PagingToolbar({  pageSize:  5 ,  store: ds,  displayInfo:  true ,  displayMsg:  ' 显示第{0}条到第{1}条记录，一共{2}条 ' ,  emptyMsg:  " 没有记录 "   }),  title:  ' 留言内容 '   });  ds.load({ params: { start:  0 , limit:  5 } });

 

 

Ext.PagingToolbar是Ext专用的分页条控件，需要设置页码和提示信息等。最后一行的意思是表格第一次加载时查询哪些记录，当然参数名就在这里固定下来，点击下一页仍然使用这里定义的两个属性。

完整显示代码如：

< script type = " text/javascript " >   function  GridBasic() {  // 定义表格  var  cm  =   new  Ext.grid.ColumnModel([  { header:  ' 姓名 ' , dataIndex:  ' Name '  },  { header:  ' 编号 ' , dataIndex:  ' Id '  },  { header:  ' 地址 ' , dataIndex:  ' Adr '  }  ]);  // 解析数据源  var  ds  =   new  Ext.data.Store({  proxy:  new  Ext.data.HttpProxy({  url:  ' data.aspx ' ,  dataType:  ' json ' ,  method:  ' GET '   }),  reader:  new  Ext.data.JsonReader({ root:  ' data ' , totalProperty:  ' totalCount '  }, Ext.data.Record.create([  { name:  ' Id ' , mapping:  ' Id '  },  { name:  ' Name ' , mapping:  ' Name '  },  { name:  ' Adr ' , mapping:  ' Adr '  }  ]))  });  ds.load();  // 装配表格  var  grid  =   new  Ext.grid.GridPanel({  el:  ' grid ' ,  ds: ds,  cm: cm,  height:  200 ,  width:  500 ,  bbar:  new  Ext.PagingToolbar({  pageSize:  5 ,  store: ds,  displayInfo:  true ,  displayMsg:  ' 显示第{0}条到第{1}条记录，一共{2}条 ' ,  emptyMsg:  " 没有记录 "   }),  title:  ' 留言内容 '   });  ds.load({ params: { start:  0 , limit:  5 } });  grid.render();  }  Ext.onReady(GridBasic);  // 开始执行  < / script>

 

 

有些情况下会遇到解析不出来或表单提交不上去的现象，比如目录配置或端口配置，那是由于Ext找不到数据源了，可以使用下面的方法解决掉：

前台接收用url: '<%:ViewData["PostUrl"]%>/Home/GuestBooks',

后台将配置好的路径输出：ViewData["PostUrl"] = "http://" + Request.Url.Host + ":" + Request.Url.Port;//提供表单提交路径。

最终完成的效果如：