SenchaTouch Data 처리

센차터치 폼 예제를 보았습니다.
관련예제 : http://dev.sencha.com/deploy/touch/examples/forms/
폼에 사용하는 Data처리가 상당히 구조적으로 이루어져 있더군요.
객체가 많아 간단히 정리해 보았습니다.

SenchaTouch Data패키지

Sencha Touch애플리케이션은 Model, Store, Proxy 등의 Data 패키지의 각 클래스를 사용해 데이터를 관리합니다.
Sencha Touch에서 만들어지는 응용 프로그램의 대부분은 GUI구성요소를 연결하는 
이러한 Data 관련 클래스를 직접적 또는 간접적으로 사용합니다.

Model

애플 리케이션에서 사용할 데이터를 표현

Proxy

Model에 사용되는 데이터소스를가져( 로드 )오는 역할

Store

Model인스턴스 집합체

Reader

MProxy가 가져온 데이터를 디코딩하는 역할( 파싱 )

DataView

Store를 이용 Model인스턴스를 템플릿 HTML을 이용해 표현

위와 같은 객체가 Sencha에서 사용하는 Data관련 클래스입니다.

내용 정리겸 그림으로 간단히 표현해 봤는데요.
내부적으로 자세히 본것이 아니라 제가 이해한 수준에서 정리한 것이라 틀릴 수도 있습니다.

음 그리다 보니 DataView가 빠져있네요.ㅎㅎ
관련 코드를 간단히 보면 아래와 같습니다.

Model선언

Model의 registModel메서드를 이용합니다.

// Ranks모델 등록
Ext.regModel( "Ranks", {
        fields:[
                {name:"rank", type:"string"},
                {name:"title", type:"string"},
        ]
} );// Ranks모델 등록끝

Store선언

Store에서는 사용될 Model을 지정할 수 있습니다. 
데이터소스는 Proxy를 통해 외부에서 가져 올수도, 내부에서 정의한 객체를 이용할 수도 있는 것 같습니다.
코드에서는 내부에 정의한 데이터를 그냥 이용합니다.

// store생성
var rankStore   = new Ext.data.JsonStore({
        data:[
                {rank:"master",         title:"Master"},
                {rank:"padawan",        title:"Student"},
                {rank:"teacher",        title:"Instructor"},
                {rank:"aid",            title:"Assistant"},
        ],
        
        model:"Ranks",
        autoLoad:true,
        autoDestory:true
});
// store생성 끝

코드에서 rankStore에 model값으로 Ranks가 이용됩니다.
data값은 proxy를 통해 가져올 수도 있지만 예제 코드는 data속성을 직접 배열로 정의해 준 경우로 보입니다.
간단히 정리하면 

rankStore에 사용되는 Data는 Ranks모델에 정의한 것처럼 name과 title속성을 가지고 둘의
데이터 타입은 String형식이다. 

정도가 되겠네요.^^

Store사용

예제코드에서는 폼 요소 중 select에 rankStore를 적용합니다.

xtype: 'selectfield',
name : 'rank',
label: 'Rank',
valueField : 'rank',
displayField : 'title',
store : rankStore

이렇게 적용한 Store객체는 아래그림처럼 옵션값을 위한 리스트에 표현

지금 본 예제에서는 DataView나 Proxy를 이용하지 않아 좀 아쉽지만
다음에 기회가 되면 정리하도록 하겠습니다.

 

출처 : http://chaospace.tistory.com/231