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'필드에 접근
});
});
이렇게 하면 된다.