Ext. data 라 이브 러 리

Ext. data 라 이브 러 리 는 주로 다음 과 같은 몇 가지 종 류 를 포함한다.
Ext.data.Store ==>DataSet
Ext.data.Record ==>DataSet.Row
Ext.data.DataProxy ==>SqlConnection
Ext.data.DataReader ==>SqlDataAdapter
다음은 각각 소개 한다.
1.Ext.data.Record
한 줄 의 데이터 형식 을 정의 할 수 있 습 니 다. 몇 가지 중요 한 속성 과 방법 이 있 습 니 다.
data: 실제 데이터
modified: dirty = = true 이 modified 에 저 장 된 것 은 수정 전의 데이터 입 니 다. 그렇지 않 으 면 비어 있 습 니 다.
e.g:
if(dirty){var a = modified['Name']};
구조 함수:
Record( Array data , [ Object id ] )
e.g:
var a = new Ext.data.Record([
{name:'Name'},
{name:'Address'}
],{id:'Name'}) ;
그 중 두 번 째 인 자 는 쓰 지 않 아 도 됩 니 다.
등가
var a = Ext.data.Record.create([
{name:'Name'},
{name:'Address'}
],{id:'Name'}) ;
실제 데이터 줄 생 성
var record = new a({
Name:'test',
Address:'where'
});
Ext. Msg. alert ('test', record. get ('Name') 출력: 'test'
Ext. Msg. alert ('test', record. data. Name) 출력: 'test'
줄 의 형식 을 정의 하면 DataProxy 를 생 성하 여 데 이 터 를 가 져 올 수 있 습 니 다.
DataProxy 는 3 가지 로 나 뉘 는데 우 리 는 주로 그 중의 2 가지 Memory Proxy 와 HttpProxy 를 사용 하 는데 그 중에서 가장 중요 한 방법 은:
load( Object params , Ext.data.DataReader reader , Function callback , Object scope , Object arg ) : void
MemoryProxy( Object data )
e.g:
Memory Proxy 는 데이터 대상 만 식별 할 수 있 는 데이터 형식 은 다음 과 같 습 니 다.
var data = [['tt','shenzhen'],['tt2','shenzhen']];
reader 를 정의 하면 여러 가지 방법 이 있 습 니 다.
1.var reader = new Ext.data.ArrayReader({id:'Name'},r);
2.var reader = new Ext.data.ArrayReader({id:'Name',fields:['Name','Address']});
코드 양 이 적 기 때문에 일반적으로 두 번 째 방법 을 사용한다.
DataReader, Array Reader, JSonReader 의 계승 관 계 는 다음 과 같다. JSonReader 는 DataReader 를 계승 하고 Array Reader 는 JSonReader 를 계승 하 며 Array Reader 는 JSonReader 와 유일한 차이 점 은 readRecords 방법의 실현 이 다르다 는 것 이다.
DataReader 가 왜 여러 가지 방법 으로 생 성 되 는 지 소스 코드 로 설명 하 겠 습 니 다.
DataReader:
Ext.data.DataReader = function(meta, recordType){this.meta = meta;this.recordType = Ext.isArray(recordType) ?Ext.data.Record.create(recordType) : recordType;};
---------------------------------------------------------
JsonReader:
Ext.data.JsonReader = function(meta, recordType){meta = meta || {};Ext.data.JsonReader.superclass.constructor.call(this, meta, recordType || meta.fields);};
JSonReader 의 구조 함수 에서 DataReader 를 호출 한 구조 함 수 는 바로 제 가 노란색 으로 표시 한 곳 입 니 다. 만약 에 JSonReader 의 Config 대상 에서 fields 속성 을 제공 하면 호출 하 는 방법 은 다음 과 같 습 니 다.
DataReader(meta,meta.fields);
그렇지 않 으 면 원래 Ext. data. Record. create () 에서 생 성 된 대상 으로 만 DataReader (meta, r. prototype. fields) 를 초기 화 할 수 있 습 니 다.
var proxy = new Ext.data.MemoryProxy(data);
proxy.load(null,reader,callback,this,{req:'123'});
function callback (Records, arg, bFlag) {alert (Records. records [0]. get ('Name')} 출력: 'tt';
proxy load 방법 에서 reader. reader Records (data) 를 호출 하여 데이터 결 과 를 읽 었 습 니 다. 바로 callback 함수 의 Records {records: [], records Count}: records 는 읽 은 데이터 의 대상 이 고 records Count 는 기 록 된 줄 수 를 표시 합 니 다.
물론 JSonReader 대상 을 만들어 서 데 이 터 를 읽 을 수도 있 습 니 다.
e.g:
var jsonReader = new Ext.data.JsonReader({id:'Name',root:'data',totalProperty:'totalCount',fields:['Name','Address']});
var jsonData = {'totalCount':2,'data':[{'Name':'tt','Address':'shenzhen'},{'Name':'tt1','Address':'shenzhen'}]};
var proxy = new Ext.data.MemoryProxy(jsonData);
proxy.load(null,reader,callback,this,{req:'123'});
function callback (Records, arg, bFlag) {alert (Records. records [0]. get ('Name')} 출력: 'tt';
Ext. data 라 이브 러 리 에서 가장 중요 한 것 은 Ext. data. store 입 니 다. Ext. grid. GridPanel, Ext. form. Combox... 데이터 원본 을 제공 할 수 있 습 니 다.
2 가지 Store 는 모두 Ext. data. Store: Ext. data. JSonstore 와 Ext. data. Simple Store 에서 물 려 받 았 다.
Ext. data. JSonReader 는 Ext. data. JSonReader 에 대응 합 니 다.Ext. data. SimpleStore 대응 Ext. data. ArrayReader
Ext. data. store 의 주요 Config 속성 은 다음 과 같 습 니 다.
url: 데 이 터 를 요청 하 는 Url 주소;
data: 직접 제공 하 는 데이터 원본;
proxy: Ext. data. dataProxy (데 이 터 를 어디서 찾 습 니까?);
reader: Ext. data. dataReader (어떤 데 이 터 를 가 져 오 는 지);
baseParams: 요청 할 때 추가 할 인자: {req: '123'};
이상 의 설정 속성 간 에 약간의 관계 가 있 는데 주로 url 과 proxy 에 나타난다
이제 store 의 각 대상 의 생 성 관계 와 순 서 를 설명 합 니 다.
1. baseParams: {start:, limit: sort: dir:} 2. 데이터 집합 에 직접 들 어 갔 는 지 판단 = > config. data = = null;this.inlineData = data;3.config.url !=null 과 동시에 config. proxy 는 수치 가 없 으 면 config 의 url 로 this. proxy = HttpProxy () 를 직접 생 성 합 니 다.this. proxy 는 뒤의 load () 함수 에서 사 용 됩 니 다. 이것 이 바로 우리 가 store 를 설정 할 때 config. data 와 config. reader 를 제공 하고 config. proxy 를 제공 하지 않 으 면 오 류 를 보고 하 는 이유 입 니 다. load () 함수 에서 Ext. data. dataProxy. load () 방법 을 호출 하기 때 문 입 니 다.
4. config. reader 를 제 공 했 는 지 판단 하고 this. record Type 과 this. fields 를 생 성 합 니 다.
JSonstore 의 구조 함수 원본 코드 는 다음 과 같 습 니 다.
Ext.data.JsonStore = function(c){Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(c, {proxy: c.proxy || (!c.data ? new Ext.data.HttpProxy({url: c.url}) : undefined),reader: new Ext.data.JsonReader(c, c.fields)}));};
생 성 원리:
1. Ext. data. store 의 구조 함 수 를 호출 합 니 다. 그 중에서 노란색 으로 표 시 된 문 구 는 proxy 설정 속성 을 제공 하면 현재 설정 한 Proxy 를 사용 하여 데 이 터 를 가 져 오고 제공 하지 않 으 면 직접 데이터 원본 이 제공 되 는 지 판단 하고 없 으 면 사용 합 니 다.
url 설정 속성 은 HttpProxy 를 생 성하 여 데 이 터 를 가 져 옵 니 다. 녹색 문 구 는 Ext. data. Data Reader 대상 을 생 성 합 니 다. Store 의 Load () 방법 은 그 가 데 이 터 를 읽 는 것 을 사용 합 니 다.
소스 코드 에서 가장 많이 사용 되 는 문 구 를 소개 합 니 다 (c = a | | b) = (c = a = = undefinde? b: a)
---------------------------------------------------------------------
Simple Store 의 구조 함수 원본 코드 는 다음 과 같 습 니 다.
Ext.data.SimpleStore = function(config){Ext.data.SimpleStore.superclass.constructor.call(this, Ext.apply(config, {reader: new Ext.data.ArrayReader({id: config.id},Ext.data.Record.create(config.fields))}));};
Simple Store 의 생 성 원 리 는 JSonstore 와 대체적으로 일치 합 니 다.
위의 2 단 코드 에서 주의해 야 할 것 은 config. fields 설정 속성 입 니 다. 그들 은 모두 Ext. data. Record 대상 을 만 드 는 데 사 용 됩 니 다.
스토어 대상 을 만 드 는 예 를 몇 개 들 어 보 겠 습 니 다.
1.
var data =[['tt','shenzhen'],['tt2','shenzhen']];
var store = new Ext.data.SimpleStore({
data:data,
fields:['Name','Address']
});
2.
var jsonData = {'totalCount':2,'data':[{'Name':'tt','Address':'shenzhen'},{'Name':'tt1','Address':'shenzhen'}]};
var store = new Ext.data.JsonStore({
data:jsonData ,
fields:['Name','Address'],
id:'Name',
root:'data',
totalProperty:'totalCount'
});
3.
var store = new Ext.data.JsonStore({
URL：
fields:['Name','Address'],
id:'Name',
root:'data',
totalProperty:'totalCount'
});
그 중에서 도 세 번 째 방법 으로 가장 광범 위 하 게 사용 된다.