Ext入门学习系列（五）表格控件（2）

上节学习了Ext中表格控件，从创建，到定义数据源、绑定显示，大体明白了一个基本的表格控件是怎么实现的。而我们用表格控件多用于从各种数据源接收数据并显示出来，并不是写死的。本章我们就不同数据源的不同实现方式分别举例说明。

一、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, 
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, 
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, 
 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, 
 500 
}); 
grid.render(); 
} 
Ext.onReady(GridBasic); //开始执行 
</script>

最终的效果如：

二、总结

OK本次表格控件的绑定就到此，一共讲解了多种数据源的绑定方法，希望大家能够在其中找到自己认为有价值的东西，其中asp,net MVC后面会专门写文章解释，还有目前只是完成了一个基本的绑定，还没有进行分页、新增、修改和删除等操作，下次将会实现这些，以期完整一个完整的表格绑定。