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

MVC 두번째 시간!!! 

두번째 샘플내용으로는

formpanel 내에다가 textfield 타입과 button 타입을 viewport내에 뿌린다음에 버튼 클릭시 textfield에 입력된 값을 메시지창에 출력시키도록 해보겠다.

ExtJS5 설정관련 내용은 

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

위 링크를 참고하고 

MVC 기본 설정은  하단 링크를 참고하도록 하자

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

이전내용은 단순히  viewport에 xtype선언을 하고 controller에서 지정해준 함수를 동작시켰는데

이제는 별도로 xtype 마저도 별도의 스크립트 파일로 나누도록 하겠다.

커스텀태그라고 할수도 있겠다 ... -_-

view 폴더안에 mvcform.js 라는 파일을 하나 생성해주고 다음과 같이 코드를 작성하였다.

● mvcform.js

Ext.define('mvc.view.mvcform', {
    //xtype : formpanel의 클래스 상속
    extend: 'Ext.form.Panel',
    //xtpe에서 사용하기위한 커스텀명칭
    alias : 'widget.mvcformcustom',
    items : [
    	{
    		//formpanel -> textfield 선언
    		xtype : 'textfield'
    	},
    	{
    		//formpanel -> button 선언
    		xtype : 'button',
    		text : '버튼클릭'
    	}
    ],
    initComponent: function() {
        this.callParent();
    }
});

만약 view바로 밑이아니고 view -> form -> mvcform.js를 생성하였다면

define명칭 역시 다음처럼 변경 해주면 되겠다.

'mvc.view.form.mvcform' 

다음으로 작업해야 할 내용은 기존 mvccontroller에서 mvcform이란 놈을 읽을 수있게 custom view를 include해주어야 한다.

include 하는 방법은 views속성에 생성한 파일의 명칭을 넣어주면 된다.

본인은 view 폴더내에 바로 생성을 하여서 다음과 같이 선언을 해주었다.

Ext.define('mvc.controller.MVCController', {
	//기본상속
    extend: 'Ext.app.Controller',
    //view 추가
    views: ['mvcform'],
    init: function() {
		this.control();
    }
}); 

만약 위에서 view를 선언해준것처럼 view 폴더 바로 밑이 아닌경우에는

view 다음부터 오는 명칭을 선언해주면 되겠다.

view -> form -> mvcform.js라고 가정한다면

views : ['form.mvcform']

이렇게 주면 되겠다.

자 그럼 커스텀 뷰 등록하는것이 끝났다.

그럼 화면에 우리가 등록한 커스텀 뷰를 보여주어야 하니

화면에 기초인 viewport.js 로 넘어가자

items내에 있던 button은 필요가 없고 우리가 정의해놓은 커스텀 뷰를 xtype으로 지정하자

xtype은 mvcform에서 정의해준 alias를 지정해주면 된다. 

widget. << 이것은 빼고 .. ㅎㅎ 

viewport.js 의 items 부분

items : [
    	{
    		xtype : 'mvcformcustom'
    	}
    ]

저런식으로 선언하고 한번 화면을 띄워보도록 하자 

잘나왔도다~ 

다음으로는 클릭이벤트 발생시, mvcformcustom 폼패널의 object를 함수에서 받아와야 하는데 

받아오기위해서는 controller에서 추가 작업을 하나더 해주어야 한다

바로 refs : [] << 를 등록해주는 일인대

views와 같은 depth에 추가해주자

refs: [
     	   {
			    ref: 'mvcformcustom',
			    selector: 'mvcformcustom'
	   }
],

위와 같은 코드를 추가해주었다면 함수에서 custom태그를 읽을수 있다.

그렇다면 이제는 버튼 클릭 -> textfield의 값을 msg창으로 읽어와보는 함수를 제작해보자

지난시간처럼 this.controller() << 이안에다가 버튼 클릭시 함수동작시키게 셀렉터를 정의해주자

this.control({
			//css 및 jquery의 셀렉터와 비슷하다
			'mvcformcustom button': {
			            //이벤트 명칭 : 현재 페이지의 정의된 함수
             	                    click: this.clk
                        }  
});

셀렉터를 모르시는분들은 셀렉터를 한번쯤 검색하셔서 이해를 하신다음에 진행하셔야 할거 같음.

쉽게 설명하면 mvcformcustom 띄우고 공백에 button이라고 정의했다면

mvcformcustom -> xtype명이 button이라는에 대한 이벤트를 정의하는것입니다.

아무튼, 커스텀태그에 대한 click 이벤트를 정의해주었다.

이제 clk 라는 함수를 만들어보자

함수의 위치는 init 다음에 작성을 해보자

clk : function(btn){
    	Ext.MessageBox.show({
			title : 'MVC alert',
			msg : this.getMvcformcustom().down("textfield").getValue(),
			buttons : Ext.MessageBox.YES,
			icon : Ext.MessageBox.INFO
    	});
}

위 함수를 보면 msg 속성에 this 어쩌구 하는놈이 있는데 바로 저것이 textfield의 값을 불러오는 함수이다.

풀어서 설명을 하자면

this :  현재 contorller 페이지에서

getMvcformcustom() : refs에서 준 mvcformcustom 에대한 오브젝트를 획득한다.

                               (get다음에 첫번째는 항상 대문자여야함)

down("textfield") : 셀렉터 개념이다. formcustom 의 자식 xtype에 button이랑 textfield가 

                          있는데 down은 해당 object의 자식 xtype을 의미하는것이다.  

jQuery와 비교를 하면 자식을 찾는경우는

down() = find() 

이고 

부모를 찾는경우는 

up() = parent()

인 셈이다.

즉 풀어서 설명을 하면

현재 controller페이지에서 formcustom의 자식인 textfield를 찾아서 

getValue() : 값을 얻어오는것이라는 뜻이다.

또다른 방법은 버튼 object를 시작으로 textfield 값을 획득 하는것도 있다.

msg : btn.up("form").down("textfield").getValue(),

버튼클릭시 결국에는 같은 동작을 하는것을 확인해 볼수 있겠다

실행화면을 보도록 하자

ㅎㅎ 잘나온다~~ 감잡기가 어렵더라도 ㅜ.ㅜ 어쩔수가 없다.... 

mvc는 익히면 빨리익힐수도 늦게 익힐수도 있다... (복불복임...)

mvc를 이해하게되면 엄청 빠른 속도로 멋진 아웃풋을 낼 수 있을것이다..

모두들 화이팅 하시길....  

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