ViewModel, UI

ViewModel

• view-viewcontroller-viewmodel 가 한 묶음
  view : 실제로 보이는 곳
  viewcontroller : view에서 이뤄지는 행위를 정의한 곳
  viewmodel : view에서 사용되는 데이터를 저장하는 곳

• controller와 동일한 방법으로 작성

TopContainerViewModel.js 코드

Ext.define('MyApp.view.main.containerBox.TopContainerViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.top-container-viewmodel',
		
		data : {
			데이터 목록 작
		}
})

TopContainer.js에 코드 추가

Ext.define('MyApp.view.main.containerBox.TopContainer', {
    extend: 'Ext.Container',
    alias: 'widget.top-container',
    cls: 'top-container',
    controller: {
        type: 'top-container-controller'
    },
    viewModel: {
        type: 'top-container-viewmodel'
    },
    layout: 'hbox',
    items: [
			{
					...
		}]
});

• data는 bind 활용하여 사용 가능
  • 따라서 data는 config 중 bind 사용 가능한 것만 사용
  • bind 내에서 삼항연산자 사용하면 효율적

예시

bind: {
		text: `{'isHidden ? '감추기' : '나타내기'}`
}

UI

• 하나의 component에 여러 cls 입력 가능
• scss 에서 여러 class 이용하여 구분하여 스타일 적용 가능
• @include : 스타일을 한 번에 적용하고 싶을 때 묶어서 저장하는 용도

cf) scss는 css의 전처리기이다

코드(cls가 left-container인 곳에서 ui: ‘first-ui’ 하면 적용됨)

.left-container {
    
    @include button-ui (
        $ui: 'first-ui',
        $background-color: 
    )

}

---

과제

로딩체크박스가 체크되면

• 버튼의 Text는 isLoading... 으로 변경 (bind 사용)
• ui 이름은 disabled 를 만들어서 사용
  disalbed 의 배경색은 lightgrey 를 이용 (bind 사용)
• disabled 가 활성화되어, 클릭 불가능상태가 되어야함

로딩체크박스가 해제되면

• 버튼의 Text 는 'active' 로 변경 (bind 사용)
• ui 이름은 active를 만들어 사용
  active의 배경색은 lightgreen 을 이용 (bind 사용)
• 클릭 가능상태가 되어야함.

첫 코드

xtype: 'container',
layout: 'hbox',
items: [
	{
		xtype: 'button',
		bind:{
			text: `{isChecked ? 'isLoading...' : 'active'}`,
			disabled: '{isChecked}',
			cls: `{ischecked ? 'top-button checked' : 'top-button unchecked'}`,
			ui: `{isChecked ? 'disabled' : 'active'}`
		},
		handler: 'onToggleButtonClicked'
	},
	{
		xtype: 'checkboxfield',
		boxLabel: 'LoadingCheckBox',
		bind:{
			checked: '{isChecked}'
		}
	}
]

.top-button .checked {
    @include button-ui (
        $ui: 'disabled',
        $background-color: lightgrey
    )
}

.top-button .unchecked {
    @include button-ui (
        $ui: 'active',
        $background-color: lightgreen
    )
}

틀린 부분

• top-button class와 checked, unchecked class를 하위 개념이 아니라 동급으로 만들었는데 scss 파일은 하위 개념으로 만들어서 적용되지 않음
• 한 class에 여러 include 들어가도 되는 걸 몰랐음

수정 후 코드

xtype: 'container',
layout: 'hbox',
items: [
	{
		xtype: 'button',
    bind: {
			text: `{isChecked ? 'isLoading...' : 'active'}`,
      disabled: '{isChecked}',
      ui: `{isChecked ? 'disabled' : 'active'}`
    },
    handler: 'onToggleButtonClicked'
  },
  {
	  xtype: 'checkboxfield',
    boxLabel: 'LoadingCheckBox',
    bind:{
	    checked: '{isChecked}'
    }
  },
]

.left-container {
    @include button-ui (
        $ui: 'disabled',
        $background-color: lightgrey
    );

    @include button-ui (
        $ui: 'active',
        $background-color: lightgreen
    )
}

달라진 곳

• 상위에 원래 있던 left-container class 사용
• isChecked 기준으로 ui 구분

추가 설명

two-way bind : 같은 data를 공유하는 bind를 만들면 바뀐 data가 알아서 저장되어서 다른 쪽 bind에도 영향을 줄 수 있다.

bind 대신 listener와 controller 이용하는 코드

onCheckBoxChanged: function(checkbox, newValue, oldValue) {
        this.getViewModel().set('isChecked',newValue);
    },

xtype: 'checkboxfield',
boxLabel: 'LoadingCheckBox',
listeners: {
	change: 'onCheckBoxChanged'
}