ExtJs 에서 grid 와 store 에 대한 응용 분석 (3)

세 번 째 부분: 해석 기와 데이터 의 관계
1. XmlReader 의 구조 방법 은 다음 과 같이 정의 합 니 다.

XmlReader( Object meta, Object recordType )

2. JSonReader 의 구조 방법 은 다음 과 같이 정의 합 니 다.

JsonReader( Object meta, Object recordType ) 

3. Array Reader 의 구조 방법 은 다음 과 같이 정의 합 니 다.

ArrayReader( Object meta, Object recordType ) 

이 해석 기 를 실례 화 할 때 2 개의 인 자 를 전달 해 야 한 다 는 것 을 나타 낸다. 하 나 는 meta 이 고 하 나 는 record Type 이다.
그러나 서로 다른 해석 기 는 그들 이 필요 로 하 는 meta 의 값 이 다르다.각자 의 Config Options (즉 설정 옵션) 만 보십시오.즉, meta 는 설정 옵션 으로 구성 되 어 있 습 니 다.recordType 은 Recorde. create 방법 을 통 해 얻 은 데이터 구조의 정 의 를 말한다.일반적으로 var fields = ["id", "name", "email", "sex", "age"] 일 수도 있 습 니 다.이렇게 정 의 된 fields.
1. XmlReader 가 받 아들 일 설정 은 다음 과 같 습 니 다.
id:
그 값 은 데이터 의 유일한 표지 문자열 입 니 다. fields 의 name 값 이 어야 합 니 다.예 를 들 어 id: "id" 도 id: "name" 일 수 있 지만 이 럴 때 필드 name 의 값 은 유일 하 게 데 이 터 를 표시 할 수 있 도록 해 야 합 니 다.
record:
그 값 은 데 이 터 를 지정 할 수 있 는 문자열 입 니 다.예: record: "row"
success:
totalRecords:
그 값 은 데이터 총 수 를 지정 할 수 있 는 문자열 입 니 다.totalRecords: "total"
2. JSonReader 가 받 아들 일 설정 은 다음 과 같 습 니 다.
id:
XmlReader
root:
그 값 은 데 이 터 를 지정 할 수 있 는 문자열 입 니 다.root: "result"
successProperty:
totalProperty:
그 값 은 데이터 총 수 를 지정 할 수 있 는 문자열 입 니 다.totalProperty: "totalProperty"
3. Array Reader 가 받 아들 이 는 설정 옵션 은 다음 과 같 습 니 다.
id:
XmlReader
이제 해석 기와 데이터 의 관 계 를 다시 봅 시다.
데 이 터 는 해석 기의 요 구 를 만족 시 키 기만 하면 데 이 터 를 성공 적 으로 얻 을 수 있다.무엇이 해석 기의 요 구 를 만족 시 키 는 것 입 니까?두 가지 방식 이 모두 해석 기의 요 구 를 만족 시 킬 수 있다.
첫 번 째: 주어진 데 이 터 는 metaData 를 포함 하지 않 습 니 다.
두 번 째: 주어진 데이터 에는 metaData 가 포함 되 어 있 습 니 다.
Array Reader 와 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"
]]

2 차원 배열 이 어야 한 다 는 것 이다.
이때 2 차원 배열 의 각 열 데이터 순서 와 fields 의 필드 이름 의 정 의 는 왼쪽 에서 오른쪽으로 일치 합 니 다. 즉, 여기 5 개의 데이터 가 있 습 니 다. 첫 번 째 데 이 터 는:
id 의 값 은 "1" 입 니 다.
name 의 값 은 "langsin 1" 입 니 다.
이메일 의 값 은 "[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>

이 dataset 라벨 은 aaa 와 같은 다른 모든 자모 로 구 성 된 라벨 을 바 꿀 수 있 습 니 다. 마지막 데이터 읽 기 에 영향 을 주지 않 습 니 다.
그러나 이 dataset 태그 쌍 에는 1 개 이상 의 results 와 row 태그 가 있어 야 합 니 다.
이제 제 이 슨 리더 좀 봅 시다.
제 이 슨 리 더 는 첫 번 째 데이터 로 도 할 수 있 고 두 번 째 데이터 로 도 할 수 있다.
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"
	}]
}

루트 설정 옵션 이 정의 되 지 않 았 을 때 다음 과 같은 데 이 터 를 제공 해 야 합 니 다.

[{
	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"
	}]
}

루트 와 fields 등 을 주 는 데이터 의 metaData 로 옮 겼 습 니 다.