Model / Record / Store

• model : record를 만들기 위한 틀, class 느낌
  • field : 하나하나의 property
• record : model에 데이터를 넣어 만든 object
• store : record의 집합

* sencha

• dataview에서 주로 component, list 사용

component

component docs
https://docs.sencha.com/extjs/7.5.1/modern/Ext.dataview.Component.html

• xtype : componentdataview
• store 작성 방법
  store docs
  https://docs.sencha.com/extjs/7.5.1/modern/Ext.data.Store.html
  • inline : 직접 데이터 삽입
  • dynamic loading : 서버 통신하여 데이터 불러옴
• 데이터 사용 시 viewmodel true, bind 활용해야 함

Ext.create({
     xtype: 'componentdataview',

     store: [
         { name: 'Peter',  age: 26 },
         { name: 'Ray',   age: 21 },
         { name: 'Egon', age: 24 },
         { name: 'Winston', age: 24 }
     ],

     itemConfig: {
         xtype: 'button',

         viewModel: true, // enable per-record binding

         bind: 'Go {record.name}!'
     }
 });

---

과제

store 사용해서 card component 생성하기

이해 안 된 부분

• TopContainer.js 에 데이터를 작성하면 어떻게 card-component에 데이터를 넣을 것인지?
  → container 파일 새로 작성 후 xtype으로 지정하면 파일 전체를 불러온 것과 같음
  → CardComponent.js 에서 bind를 사용하면 data를 넣을 수 있다!

TopContainer.js 에 conponentdataview 코드 추가

xtype: 'componentdataview',
                    layout:{
                        type: 'hbox'
                    },
                    bind: {
                        store: `{mydbsstore}`
                    },
                    itemConfig: {
                        xtype: 'card-component',
                        viewModel: true,
                    }

CardComponent.js 코드 수정

items: [
                {
                    html: '수익: 해설',
                    cls: 'text-top'
                },
                {
                    bind: {
                        html: `{record.title}`
                    },
                    cls: 'text-medium'
                },
                {
                    bind: {
                        html: `{record.transformTitle}`
                    },
                    cls: 'text-medium'
                },
                {
                    bind: {
                        html: `{record.progress}`
                    },
                    cls: 'text-bottom'
                }
            ]

cf) 하나의 store를 사용하여 여러 분류로 나누고 싶을 때는 어떻게 해야하는지?
→ grouper 사용하면 가능

읽어보기
grouper docs
https://docs.sencha.com/extjs/7.5.1/modern/Ext.data.Store.html#cfg-grouper

---

model, store 파일 분리

• view 파일에 store가 매번 있으면 번거롭기 때문에 model, store 파일을 분리
  • model 파일, store 파일, data(json) 파일을 각각 따로 만들어서 관리
• data를 저장하는 viewmodel 파일에 연결한 다음 view 파일에서 호출하여 사용한다.
• model 파일 이름 : 한 개만 있기 때문에 s 붙이지 않음(단수)
• store 파일 이름 : model에 데이터를 넣은 여러 record가 있으므로 s 붙임(복수)

data 파일 작성 코드

[
    {
        "id": 1,
        "title": "내신 2023년 서울 양천구 목동고 고2공통 1학기기말 수학1",
        "progress": 0
    },
    {
        "id": 2,
        "title": "내신 2023년 서울 양천구 목동고 고1공통 1학기기말 수학상",
        "progress": 4
    },
    {
        "id": 3,
        "title": "내신 2023년 부산 동래구 동인고 고2공통 2학기기말 미적분",
        "progress": 3
    },
    {
        "id": 4,
        "title": "내신 2023년 서울 양천구 목동고 고1공통 2학기중간 수학하",
        "progress": 1
    },
    {
        "id": 5,
        "title": "내신 2022년 서울 양천구 광영여고 고1공통 2학기기말 수학하",
        "progress": 2
    },
    {
        "id": 6,
        "title": "내신 2023년 안양 동안구 부흥고 고2공통 2학기중간 수학2",
        "progress": 2
    },
    {
        "id": 7,
        "title": "내신 2023년 서울 서대문구 이화금란고 고1공통 1학기중간 수학상",
        "progress": 2
    }
]

model 파일 작성 코드
model docs
https://docs.sencha.com/extjs/7.5.1/modern/Ext.data.Model.html

• model 파일은 alias 작성하지 않음
• 앞에서 정의한 field 이용하여 새로운 field 생성 가능

Ext.define('MyApp.model.MyDB', {
    extend: 'Ext.data.Model',
    fields: [
				// 각 field 정의
        { name: 'id', type: 'number' },
        { name: 'title', type: 'string' },
        { name: 'progress', type: 'int' },
        { name: 'transformTitle', calculate: function (data) {
            let title = data.title;
            title = title + ' progress: ' + data.progress;
            return title;
        } }
        
    ]
})

store 파일 작성 코드
store docs
https://docs.sencha.com/extjs/7.5.1/modern/Ext.data.Store.html

• model 파일 불러와서 사용
• alias 작성 필요
  • viewmodel 파일에서 사용할 이름

(질문) viewmodel에 alias 사용하는데 storeId는 왜 추가하는지?

• url 에 데이터 연결

Ext.define('MyApp.store.MyDBs', {
    extend: 'Ext.data.Store',
    alias: 'store.mydbs-store',
    storeId: 'mydbs-store',
    model: 'MyApp.model.MyDB',
    proxy: {
        type: 'ajax',
        url: 'app/data/MyDBs.json',
        reader: {
            type: 'json',
        }
    },
    sorters: [{
        property: 'progress',
        direction: 'DESC'
    }],
    autoLoad: true
})

TopContainerViewModel.js에 stores 추가

stores: {
        mydbsstore: {
            type: 'mydbs-store'   
        }

TopContainer.js 코드 수정

• bind를 사용하여 viewmodel 파일에 있는 store 호출
• 정상적으로 호출되었다면 데이터를 바인딩하여 화면 출력 가능

{
                    xtype: 'componentdataview',
                    layout:{
                        type: 'hbox'
                    },
                    bind: {
                        store: `{mydbsstore}`
                    },
                    itemConfig: {
                        xtype: 'card-component',
                        viewModel: true,
                    }
                },