ExtJS 기초강좌 5 - ExtJS 문법 이해 및 Config 사용법
이번 시간에는 ExtJS 관련 문법에 대해서 간단히 이해를 돕도록 해보겠습니다.
ExtJS 기본구조
ExtJS의 기본문법의 틀은 JSON 규격을 따르고 있습니다.
단일 속성일 경우, "{ }"
다중 속성일 경우, "[ {},{} ]"
JSON 규격에 대해서 익숙하신 분들이시라면, ExtJS에 크게 거부감을 느끼지 않으실겁니다.
ExtJS onload 함수
Ext.onReady(function(){
// code here
});
위와 같은 코드를 이용하였습니다.
ExtJS MVC에서는 별도로 위와같이 "Ext.onReady"를 사용하지 않아도 되지만, 무슨 기능을 하는 문법인지 이해를 하고 넘어가도록 하겠습니다.
ExtJS 기초강좌 1 에서도 설명드렸다시피, ONLOAD함수내에 작성된 스크립트 명령어는 모든 HTML태그가 출력이 된 후, 기능을 수행합니다.
Ext.create('xxx',{}) 문법이해
Ext 패키지 밑에 panel 밑에 'Panel' 이라는 클래스가 존재합니다.
그래서 만약 패널 컴포넌트를 생성해주시고자 하신다면,
Ext.create('Ext.panel.Panel',{
// config here
});
위와같이 선언을 해주시면 되겠습니다.
Config 이해하기
컴포넌트마다 지원하는 Config(속성)이 다양합니다.
속성값이라 하면,
Ext.create('Ext.panel.Panel',{
// config here
});
config here이라는 부분에 위치하게 되는 key : value 형식의 속성값입니다.
이번 역시, 패널 컴포넌트를 이용하여 설명을 드리겠습니다.
API 문서를 보고 Panel 클래스를 선택하게 되면 우측에 상단부분에 Configs라는 메뉴가 존재합니다. 해당 부분에 마우스 포인터를 위치 시키게 되면 다음처럼 리스트가 표출 됩니다.
위에 속성값들이 key 값이 되겠습니다.
해당 부분에 대한 value값에 대한 데이터 형식과 같은 처리는 사용하고자 하는 속성을 클릭하게 되면 자세하게 입력값 및 설명에 대해서 이동 시켜줍니다.
"width" config를 클릭한 경우,
위 처럼 width 속성의 value에 입력할 수 있는 타입은 Number 타입과 String 타입이 되겠군요.
하단에는 해당 속성에 대한 설명이 영문으로 자세히 나와있습니다.
Method / Event 등 역시 이와같이 선택하셔서 적용해보세요.
앞으로 메소드 및 이벤트에대해서는 이것이 어떤 기능을 한다라고 자세히 설명하지는 않도록 하겠습니다.
Config 찾는것처럼 API 문서를 이용해주세요.
원하는 위치에 표출시키기
Ext.create를 이용하게 되면, 컴포넌트가 생성되었을 뿐, 화면에는 출력이 되지 않습니다.
renderTo의 value로 Ext.getBody() 를 주었습니다.
Ext.getBoddy()는 body태그에 해당 컴포넌트를 통째로 적용하겠다라는 의미로 해석 할 수 있습니다.
만약, HTML 화면의 일부를 ExtJS 컴포넌트를 출력하고 싶다라고 할경우에도 사용이 가능합니다.
예를들어 코드를 작성해보았습니다.
▶ 실행결과
위와 같이 3개의 DIV 태그 중 두번째 DIV 태그에 패널이 삽입 되는것을 확인 할 수 있습니다.
즉, 모든 화면을 ExtJS로 구성을 하느냐, 별도로 퍼블리싱을 일부페이지만을 ExtJS 컴포넌트를 이용하느냐 선택사항입니다.
지금까지 간략하게나마 ExtJS 기초분법에 대하여 설명을 하였습니다.
될수 있는 한, 이해하기 쉽게 풀어서 설명을 드렸는데, 괜찮으셨나요?
다음장에는 ExtJS 컴포넌트 몇가지 예를들어 이벤트 적용하는 방법에 대하여 알아보도록 하겠습니다.
