[ExtJs4] nested model

nested model에 대해 extjs는 hasMany라는 configs를 제공한다.

json을 예로들지만, xml이되든 단순히 중첩된 데이터의 표현이든 상관없다.

/* Parent.js */

Ext.define('App.model.Parent', {

extend : 'Ext.data.Model',

alias : 'model.parent',

requires : 'App.model.Child',     //부모가될 모델에서 자식모델을 포함시켜준다.

//자식도 requires를 해버리면 스택이 넘쳐버리도록 계속 서로참조한다..

//중요한건데, MVC모델로 작성하는 경우 꼭 Parent.js에서 참조해주어야한다.

//( MVC모델이 아닌경우엔 그냥 Ext.requires 에서만 하면 되려나? )

//이거 안해서 반나절을 삽질했다. 오류도 안띄워준다. 오류가 아니니깐 ㅎ

fields : [

{ name : 'Name' }

],

hasMany : { 

model : 'App.model.Child', //모델은 되도록이면 풀네임을 써주도록.

name : 'childs',                //중첩된 자식모델의 루트역할을한다.

associationKey : 'childs'   //사실 이건 왜넣는지 모르겠지만,, 

//난 그냥 습관적으로 name과 같은값으로 주고있다.

//이게 뭘 의미하시는지 아시는분?

},

proxy : {

type : 'ajax',

url : './data/family_data.json',

headers : {

'Accept' : 'application/json'

},

reader : {

type : 'json',

root : 'parents',

totalProperty : 'count'

}

}

});

/* Child.js */

Ext.define('App.model.Child', {

extend : 'Ext.data.Model',

alias : 'model.child',

fields : [

{ name : 'Name' },

{ name : 'Age', type : 'int' }

],

belongsTo : 'App.model.Parent'

});

//데이터는 이런 형태를 띈다.

/* family_data.json */

{

"success" : true,

"count" : 1,

"parents" : [{

"Name" : "Kim",

"childs" : [{

"Name" : "Kim child",

"Age" : 10

},{

"Name" : "Kim child 2",

"Age" : 7

}]

}]

}

그다음, 이 모델을 사용하는 Family라는 store가 있다고 한다면,

Family.getAt(0).childs()    //childs 는 Parent모델의 hasMany에 정의한 Child모델의 'name'이다.

로 중첩된 store(?) 에 접근할 수 있다. 모델을 포함하는 오브젝트니 store가 맞으려니 한다. 그다음은 똑같다.

Family.getAt(0).childs().getAt(0).get('Age');

//Family store의 첫번째 모델 레코드에 접근해, childs를 키로하는 중첩된 store에 접근한 후,

// 다시 첫번째 모델 레코드에 접근하여 'Age'필드를 가져온다.

좀 더 멋지게 가져오려면,

Family.each( function(parentRec){

parentRec.get('Name');    //Parent모델의 'Name'필드에 접근

parentRec.childs().each( function(childRec){

childRec.get('Name');    //Child모델의 'Name'필드에 접근

childRec.get('Age');      //'Age'필드에 접근

});

});

이렇게 하면 된다.