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”,后面的就不用解释了,和前面的一样。

效果如:

clip_image002

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

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>

 

最终运行效果如:

clip_image004

3. 使用动态语言绑定

PHP:

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

 

<?php  $arr=array0=>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>

 

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

绑定结果如:

clip_image006

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 { getset; }  public string Name { getset; }  public string Adr { getset; }  }

 

在接受页面的前台协商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>

 

最终运行效果如:

clip_image008

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 { getset; }  public string Name { getset; }  public string Adr { getset; }  } 
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>

 

最终的效果如:

clip_image010

 

 

 

页是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中的一种,其他的返回值类型如下图所示:

clip_image001

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;//提供表单提交路径。

最终完成的效果如:

clip_image003

posted @ 2013-08-21 16:10 残星 阅读(...) 评论(...) 编辑 收藏