ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View/Controller + Model+Store 추가)

지난 포스팅은 MVC중에서 M을제외한 VC를 알아보았습니다.

이번에는 View/Controller 에 추가로 Model+Store에 관하여  포스팅을 해보겠습니다.

2014/11/26 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5 MVC 구조 잡아보기(View+Controller 연동)

이번 샘플은 콤보박스를 예를 들어 진행하겠습니다.

이전 구조에서 위의 빨간네모친 폴더 및 파일을 생성해주도록 합니다.

CustomCombo.js

Ext.define('mvc_study.view.combo.CustomCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias : 'widget.customCombo',
    fieldLabel: '선택',
    store: 'ComboboxStore',
    queryMode: 'local',
    displayField: 'title',
    valueField: 'value',
    initComponent: function() {
        this.callParent();
    }
});

이전 커스텀 버튼컴포넌트 생성처럼 콤보박스 컴포넌트에서 지원하는 속성들을 사용하였고

 store의 속성은 Ext.create를 이용하여 사용이 가능하지만 ComboStore라고 정의해주었습니다.

다음 순서로는 데이터스토어 코드를 작성해보도록 하겠습니다.

ComboboxStore..js

Ext.define('mvc_study.store.ComboboxStore', {
    extend: 'Ext.data.Store',
    model: 'mvc_study.model.ComboboxModel',
    data : [{
    	title : '타이틀1',
    	value : '값1'
    },{
    	title : '타이틀2',
    	value : '값2'
    },{
    	title : '타이틀3',
    	value : '값3'
    },{
    	title : '타이틀4',
    	value : '값4'
    }],
    proxy: {
        type: 'memory'
    }
});

이전 Ext.create했던 형식과 동일한 구조로 데이터스토어를 define 해주었습니다.

다른점이 있다면 fields 속성대신 model 속성을 정의해주었습니다.

솔직히 model은 별도로 정의해주지 않아도 되긴 하지만 

ExtJS 공식사이트에서도 위처럼 샘플링을 들어주니 

model 속성을 이용해보도록 하겠습니다.

ComboboxModel.js

Ext.define('mvc_study.model.ComboboxModel', {
    extend: 'Ext.data.Model',
    fields: ['title','value']
});

데이터스토어의 들어가는 fields 속성이 모델클래스에 정의되었습니다.

사용유무에 대해서는 스스로 결정하시면 되겠습니다.

Viewport.js

기존에 존재하는 xtype : 'customButton' -> xtype : 'customCombo' 으로 변경을 해줍니다.

MvcController.js

컨트롤러부분은 추가 및 변경사항이 많으므로 하단 코드를 덮어 씌운 다음 설명을 하도록 하겠습니다.

Ext.define('mvc_study.controller.MvcController', {
    extend: 'Ext.app.Controller',
    views: ['combo.CustomCombo'],
    stores: ['ComboboxStore'],
    refs: [
		{
			ref: 'customCombo',
			selector: 'customCombo'
		}
    ],
    init: function() {
        this.control({
			'customCombo': {
                select: this.showComboData
            }
		});
    },
    showComboData : function(combo, records, eOpts){
    	alert("선택콤보값:"+combo.getRawValue()+","+combo.getValue());
    }
});

상단코드에서 추가/변경된 부분에 대해서는 다음과 같습니다.

공통적으로 삭제된 부분은 customButton 에 대한 정의부분을 삭제후 customCombo로 변경

views : customButton 삭제 -> customCombo 추가

stores속성추가 : 추가된 데이터스토어를 사용하기 위함

refs : customButton 삭제 -> customCombo추가(select 이벤트리스너 정의)

showComboData 함수정의 : 출력된 콤보목록에서 특정 값선택시 alert출력해주는 기능정의

showAlert함수 삭제 : 버튼클릭시 동작되는 함수여서 삭제

실행결과를 확인해보도록 하겠습니다.

위처럼 정상적으로 컴포넌트 화면 및 기능들이 

정상적으로 동작되는 것을 확인하였습니다.

다음장은 MVC구조를 이용하여 

간단하게 그리드 CRUD 기능을 구현해보도록 하겠습니다.

by 개발로짜