1. XML数据源
假设我们有一个数据源是以XML的形式存在的，我们需要从里面取出数据并绑定在界面。XML的结构如下：
< 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的写法，拿一个一组数据为例：
{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，只需要改动这一处即可，修改后的代码如下：
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（数组）使用的时候只需把数据库中查询出来的数据已数组形式传递进去，然后输出即可，实现代码如：
$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 ) . ' } ' ;
?>
前台页面也只需要更改数据源为输出数据的文件名即可，完整代码如：
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.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代码即可：
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.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对应的代码如：
{
StudentModel stu = new StudentModel();
List < Student > s = stu.GetAll();
return Json( new { data = s}, JsonRequestBehavior.AllowGet);
}
注：MVC2出于对网站数据的保护，默认禁止通过get的请求返回JsonResult数据，你可以在返回Json时，传入第二个参数 JsonRequestBehavior.AllowGet。
View对应的代码如：
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>
最终的效果如：
二、总结
OK本次表格控件的绑定就到此，一共讲解了多种数据源的绑定方法，希望大家能够在其中找到自己认为有价值的东西，其中asp,net MVC后面会专门写文章解释，还有目前只是完成了一个基本的绑定，还没有进行分页、新增、修改和删除等操作，下次将会实现这些，以期完整一个完整的表格绑定。
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
