ExtJs中关于grid和store的应用分析（三）

第三部分：解析器与数据的关系


一、XmlReader的构造方法定义如下：

 XmlReader( Object meta, Object recordType )

XmlReader( Object meta, Object recordType )

二、JsonReader的构造方法定义如下：

 JsonReader( Object meta, Object recordType )

JsonReader( Object meta, Object recordType ) 

三、ArrayReader的构造方法定义如下：

 ArrayReader( Object meta, Object recordType )

ArrayReader( Object meta, Object recordType ) 

都表示实例化这些解析器时，需要传递2个参数，一个是meta,一个是recordType。
但是不同的解析器他们需要的meta的值为不同的。只需看各自的Config Options（即配置选项）。也就是说，meta是由配置选项组成的。而recordType是指通过Recorde.create方法得到的数据结构的定义。一般也可以为var fields = ["id","name","email","sex","age"];这样定义的fields。

一、XmlReader所接受的配置选项有：

id :
其值是作为数据唯一标志的字符串,必须为fields中某列的name值。如：id:"id"，也可以是id:"name"，但是这个时候，字段name的值要确保是能唯一标志数据的。
record :
其值为可以指定数据的字符串。如：record:"row"
success :
totalRecords :
其值为可以指定数据总数的字符串。如：totalRecords:"total"

二、JsonReader所接受的配置选项有：

id :
同XmlReader
root :
其值为可以指定数据的字符串。如：root:"result"
successProperty :
totalProperty :
其值为可以指定数据总数的字符串。如：totalProperty:"total"

三、ArrayReader所接受的配置选项有：

id :
同XmlReader

现在再来看一下解析器与数据的关系。
数据只要满足了解析器的要求，那么数据就能获取成功。什么叫满足解析器的要求呢？有两种方式均可满足解析器的要求。
第一种：给予的数据不包含metaData
第二种：给予的数据包含了metaData

ArrayReader和XmlReader需要的数据是没有metaData的 ，此时给予的数据需要包含以下内容：
1、ArrayReader:
比如ArrayReader如下定义：
var fields = ["id","name","email","sex","age"];
var reader = new Ext.data.ArrayReader({
  id:"id"
},fields);

给予的数据应该如下：

 [[
      "1" , "langsin1" , "[email protected]" , "0" , "20"
 ],[
      "2" , "langsin2" , "[email protected]" , "1" , "21"
 ],[
      "3" , "langsin3" , "[email protected]" , "0" , "22"
 ],[
      "4" , "langsin4" , "[email protected]" , "1" , "23"
 ],[
      "5" , "langsin5" , "[email protected]" , "0" , "24"
 ]]

[[
	"1","langsin1","[email protected]","0","20"
],[
	"2","langsin2","[email protected]","1","21"
],[
	"3","langsin3","[email protected]","0","22"
],[
	"4","langsin4","[email protected]","1","23"
],[
	"5","langsin5","[email protected]","0","24"
]]

也就是必须为二维数组。
此时二维数组中的每列的数据顺序与fields中的字段名的定义是从左向右一一匹配，即，这里有5条数据，第一条数据是:
id的值为"1"，
name的值为"langsin1"，
email的值为"[email protected]"，
sex的值为"0"，
age的值为"20"

2、XmlReader
比如XmlReader如下定义：
var fields = ["id","name","email","sex","age"];
var reader = new Ext.data.XmlReader({
  id:"id",
  record:"row",
  totalRecords:"results"
},fields);

给予的数据应该如下：

 <? xml   version = "1.0"   encoding = "utf-8" ?>
 < dataset >
      < results > 2 </ results >
      < row >
          < id > 1 </ id >
          < name > langsin1 </ name >
          < email > [email protected] </ email >
          < sex > 0 </ sex >
          < age > 20 </ age >
      </ row >
      < row >
          < id > 2 </ id >
          < name > langsin2 </ name >
          < email > [email protected] </ email >
          < sex > 1 </ sex >
          < age > 21 </ age >
      </ row >
      < row >
          < id > 3 </ id >
          < name > langsin3 </ name >
          < email > [email protected] </ email >
          < sex > 0 </ sex >
          < age > 22 </ age >
      </ row >
      < row >
          < id > 4 </ id >
          < name > langsin4 </ name >
          < email > [email protected] </ email >
          < sex > 1 </ sex >
          < age > 23 </ age >
      </ row >
      < row >
          < id > 5 </ id >
          < name > langsin5 </ name >
          < email > [email protected] </ email >
          < sex > 0 </ sex >
          < age > 24 </ age >
      </ row >
 </ dataset >

<?xml version="1.0" encoding="utf-8"?>
<dataset>
	<results>2</results>
	<row>
		<id>1</id>
		<name>langsin1</name>
		<email>[email protected]</email>
		<sex>0</sex>
		<age>20</age>
	</row>
	<row>
		<id>2</id>
		<name>langsin2</name>
		<email>[email protected]</email>
		<sex>1</sex>
		<age>21</age>
	</row>
	<row>
		<id>3</id>
		<name>langsin3</name>
		<email>[email protected]</email>
		<sex>0</sex>
		<age>22</age>
	</row>
	<row>
		<id>4</id>
		<name>langsin4</name>
		<email>[email protected]</email>
		<sex>1</sex>
		<age>23</age>
	</row>
	<row>
		<id>5</id>
		<name>langsin5</name>
		<email>[email protected]</email>
		<sex>0</sex>
		<age>24</age>
	</row>
</dataset>

这里dataset标签可以换车其他任何字母组成的标签，如aaa，不会影响最后数据的读取。
但是这个dataset标签对里就必须要有1个或多个的results和row标签对。

现在再来看下JsonReader。
JsonReader可以用第一种也可以用第二种的数据给予方式。
1、给予的数据不包含metaData的情况时：
比如JsonReader如下定义：
var fields = ["id","name","email","sex","age"];
var reader = new Ext.data.JsonReader({
  id:"id",
  root:"result",
  totalProperty:"total"
},fields);

给予的数据应该如下：

 {
     total:5,
     result:[{
         id: "1" ,
         name: "langsin1" ,
         email: "[email protected]" ,
         sex: "0" ,
         age: "20"
     },{
         id: "2" ,
         name: "langsin2" ,
         email: "[email protected]" ,
         sex: "1" ,
         age: "21"
     },{
         id: "3" ,
         name: "langsin3" ,
         email: "[email protected]" ,
         sex: "0" ,
         age: "22"
     },{
         id: "4" ,
         name: "langsin4" ,
         email: "[email protected]" ,
         sex: "1" ,
         age: "23"
     },{
         id: "5" ,
         name: "langsin5" ,
         email: "[email protected]" ,
         sex: "0" ,
         age: "24"
     }]
 }

{
	total:5,
	result:[{
		id:"1",
		name:"langsin1",
		email:"[email protected]",
		sex:"0",
		age:"20"
	},{
		id:"2",
		name:"langsin2",
		email:"[email protected]",
		sex:"1",
		age:"21"
	},{
		id:"3",
		name:"langsin3",
		email:"[email protected]",
		sex:"0",
		age:"22"
	},{
		id:"4",
		name:"langsin4",
		email:"[email protected]",
		sex:"1",
		age:"23"
	},{
		id:"5",
		name:"langsin5",
		email:"[email protected]",
		sex:"0",
		age:"24"
	}]
}

如果定义时不包含root配置选项时，那么给予的数据应该如下：

 [{
     id: "1" ,
     name: "langsin1" ,
     email: "[email protected]" ,
     sex: "0" ,
     age: "20"
 },{
     id: "2" ,
     name: "langsin2" ,
     email: "[email protected]" ,
     sex: "1" ,
     age: "21"
 },{
     id: "3" ,
     name: "langsin3" ,
     email: "[email protected]" ,
     sex: "0" ,
     age: "22"
 },{
     id: "4" ,
     name: "langsin4" ,
     email: "[email protected]" ,
     sex: "1" ,
     age: "23"
 },{
     id: "5" ,
     name: "langsin5" ,
     email: "[email protected]" ,
     sex: "0" ,
     age: "24"
 }]

[{
	id:"1",
	name:"langsin1",
	email:"[email protected]",
	sex:"0",
	age:"20"
},{
	id:"2",
	name:"langsin2",
	email:"[email protected]",
	sex:"1",
	age:"21"
},{
	id:"3",
	name:"langsin3",
	email:"[email protected]",
	sex:"0",
	age:"22"
},{
	id:"4",
	name:"langsin4",
	email:"[email protected]",
	sex:"1",
	age:"23"
},{
	id:"5",
	name:"langsin5",
	email:"[email protected]",
	sex:"0",
	age:"24"
}]

2、给予的数据包含metaData的情况时：
比如JsonReader如下定义：
var reader = new Ext.data.JsonReader({
  id:"id",
},fields);

给予的数据应该如下：

 {
     metaData:{
         fields:[ "id" , "name" , "email" , "sex" , "age" ],
         root: "result"
     },
     result : [{
         id :  "1" ,
         name :  "langsin1" ,
         email :  "[email protected]" ,
         sex :  "0" ,
         age :  "20"
     }, {
         id :  "2" ,
         name :  "langsin2" ,
         email :  "[email protected]" ,
         sex :  "1" ,
         age :  "21"
     }, {
         id :  "3" ,
         name :  "langsin3" ,
         email :  "[email protected]" ,
         sex :  "0" ,
         age :  "22"
     }, {
         id :  "4" ,
         name :  "langsin4" ,
         email :  "[email protected]" ,
         sex :  "1" ,
         age :  "23"
     }, {
         id :  "5" ,
         name :  "langsin5" ,
         email :  "[email protected]" ,
         sex :  "0" ,
         age :  "24"
     }]
 }

{
	metaData:{
		fields:["id","name","email","sex","age"],
		root:"result"
	},
	result : [{
		id : "1",
		name : "langsin1",
		email : "[email protected]",
		sex : "0",
		age : "20"
	}, {
		id : "2",
		name : "langsin2",
		email : "[email protected]",
		sex : "1",
		age : "21"
	}, {
		id : "3",
		name : "langsin3",
		email : "[email protected]",
		sex : "0",
		age : "22"
	}, {
		id : "4",
		name : "langsin4",
		email : "[email protected]",
		sex : "1",
		age : "23"
	}, {
		id : "5",
		name : "langsin5",
		email : "[email protected]",
		sex : "0",
		age : "24"
	}]
}

这里将root和fields等都转移到了给予的数据的metaData中。