[ExtJS강좌 24] MVC 기반으로 컴포넌트 동작시키기 (3)

전에는 이벤트들을 기술하는 controller와 컴포넌트들만 모아놓은 view 까지 나누는 작업을 

하였다.

오늘은 store/model 영역까지 나누는 작업을 진행하도록 하겠음 

store를 이용하는 모든 컴포넌트들(GridPanel, TreePanel, Combobox 등등..)에 대하여 

나눠볼 수 있겠다.

오늘로직은

버튼 클릭시, store에서 자동으로 data를 서버페이지에서 받아와 콤보박스에 뿌려준 다음,  

선택되어있는 콤보박스의 value와 text 값을 msg에 출력해보도록 하겠다 ~~

항상 마찬가지로 

ExtJS5 설정이 되있지 않으신 분들은  하단 링크를 참조하여 주시고

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

MVC (1),(2) 에대한 내용을 참고하신 다음 해당 예제를 진행하도록 하시길...

2014/07/04 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 22] MVC 기반으로 컴포넌트 동작시키기 (1)

2014/07/04 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 23] MVC 기반으로 컴포넌트 동작시키기 (2)

지난 mvc 구조에 이어서 추가로 구조를 나누도록 하겠다. 

mvc폴더내에 controller/view 폴더만 생성하였을 것이다.

추가로 store/model 폴더를 생성해주자

MVC 구조잡는법은 정답은 없다.

작업하는 자신의 환경에 맞춰서 잡아주면된다.

작성자의 최종 작업폴더는 다음과 같다.

DB작업부터 해서 총 샘플링을 할 수 없는 관계로 임의의 값을 서버에서 jsonObject로 넘겨주어서 출력하는 형식을 쓰도록 하겠다.

항상 store작업을 할때 언급은 하지만 json파싱을 위해 

php는 별도의 encode해주는 함수가 있는것으로 알고 있다.

java -> spring framework 는 jackson lib가 있는것으로 알고 있긴 하지만 본인이 첨부하는 

파일을 사용하여도 무관함

본인은 model 1 방식을 사용하고 있으므로 그냥 json-simple을 이용하기로 하겠음

json-simple-1.1.1.jar

store는 나중에 작업하기로 하고 본인은 위 구조에서 controller / view에 관련된 파일은 별도로 

추가하지 않도록 하겠다 

내부적으로 소스들을 조금씩 변경하여 사용하도록 하겠음

기존 view디렉토리의 mvcform.js 에서 xtype : 'textfield' 가 있는데 이부분을 다음과 같이 변경 하였다.

1. mvcform.js 일부 수정 textfield -> combo로

{
            //formpanel -> combo 선언
            xtype : 'combo',
            //combo리스트를 뿌려줄 store정의
            store : 'combostore',
            //store에서 받은 json key중,
            //선택시 value값이 될 json key
            valueField: 'id',
            //store에서 받은 json key중,
            //선택시 화면에 표출이 될 json key
            displayField: 'title',
            //초반에는 빈공백이 들어가므로 placeholder 정의
            emptyText: '선택하세요'
}

2. 새로 생성한 model 디렉토리에 combomodel.js파일을 하나 

생성해주고 다음과 같이 작성을 해주자

Ext.define('mvc.model.combomodel', {
    extend: 'Ext.data.Model',
   //store에서 받은 json의 key값
    fields: ['id', 'title']
});

3. 새로 생성한 store 디렉토리에 combostore.js파일을 하나 생성해주고 다음과 같이 작성해주자

Ext.define('mvc.store.combostore', {
    extend: 'Ext.data.Store',
    //mapping 시켜주기 위한 model
    model: 'mvc.model.combomodel',
    //autoLoad true를 해주어도 무관
    autoLoad: false,
    proxy: {
        type: 'ajax',
        api: {
        	// combolist.jsp 파일에서 jsonobject를 받는다.
        	read: '/combolist.jsp'
        },
        reader: {
            type: 'json', 
            //서버에서 넘겨받은 json object의 key값 = success를 주고 value값을 true로 주어야 함
            successProperty: 'success',
            //콤보박스에 list형식으로 받은 json array의 root key
            rootProperty: 'items'
        }
    }
});

다음으로 컨트롤러에 views: ['mvcform'], 위에 다음과 같은 코드를 삽입하여주자 

//store 추가
stores: ['combostore'],

기존에 그리드 페이징 했던 부분을 보면 위의 소스가 한 페이지에 몽땅 들어있었다.

2014/06/30 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 12]그리드패널 - 세번째 편 ajax 그리드 페이징사용하기~

하지만 위와같이 나누어 줌으로써 역할을 나눠주고 각각의 기능별로 관리를 할 수 있다는것을 

느낄 수 있을것!!

... 나만느끼는건가..;;;   

아직 체감을 하지 못한다면 crud 샘플링을 할때 체감을 할 수 있을것이라 믿는다!!

combolist.jsp 페이지에서 받아야할 json의 형식은 다음과 같아야 한다.

{"items":[
              {"id":1,"title":"제목1"},
              {"id":2,"title":"제목2"}
            ],
  "success":true}

별도로 서버페이지의 로직은 더이상 설명 안하는걸로? ㅋㅋ 

그동안 순서대로 따라오신분들이시라면 쉽게 json object를 생성하실거라 믿음!! 

마지막으로 버튼클릭으로 msg창에다가 선택된 콤보박스의 text내용과 value값을 찍어보도록 

하자!! 

controller를 보면 clk함수내의 메시지 출력을 사용했었는데 메시지 함수내의 속성중에 msg 부분을 다음과 같이 수정 후 화면을 실행하도록 하자

msg : this.getMvcformcustom().down("combo").getRawValue()+"/"+this.getMvcformcustom().down("combo").getValue(),

실행화면 GOGO

실행을 해보면 combobox 클릭하면서 layout영영내에 로딩바가 잠시생기면서 리스트 출력이 되는것을 확인 할 수 있을것이다!  

ajax통신이 이루어지면서 서버에서 json object 를 받아와 출력을 한다는 의미이기도 하다

이로써 mvc의 기본구조를 모두 마쳤다. 

최종 폴더 구조는 다음과 같다.

mvc는 이해를 금방 하기에는 어렵습니다.

하지만 mvc프레임웍들을 (Spring framework / 코드이그나이터 등등...) 접해보셨던 분들이시라면 조금만 더 노력하신다면 수월하게 이해를 하실거라 생각됩니다.

mvc의 최종 구조는 오늘까지 한것이 기본구조라 설명 드릴 수 있겠습니다.

다음부터는 조금은 복잡해 지겠지만 구조는 항상 오늘까지 작업한 틀에서 변경이 되지 않을거라고 말씀 드리고 싶습니다 ^^

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!