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 clip_image002](http://www.myext.cn/Article/UploadFiles/201012/20101207105154189.jpg)
最后需要注意的是,本例包括以后的例子需要部署到服务器上运行,才能出现结果,不能双击网页文件查看效果,因为要和服务器交互。
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 clip_image004](http://www.myext.cn/Article/UploadFiles/201012/20101207105154930.jpg)
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>
和前面学习过的基本一样。
绑定结果如:
![clip_image006 clip_image006](http://www.myext.cn/Article/UploadFiles/201012/20101207105154212.jpg)
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>
最终运行效果如:
![clip_image008 clip_image008](http://www.myext.cn/Article/UploadFiles/201012/20101207105155825.jpg)
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>
最终的效果如:
![clip_image010 clip_image010](http://www.myext.cn/Article/UploadFiles/201012/20101207105155257.jpg)
页是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 clip_image001](http://www.myext.cn/Article/UploadFiles/201012/20101207105156112.gif)
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 clip_image003](http://www.myext.cn/Article/UploadFiles/201012/20101207105157598.jpg)