ExtJS에서 제공하는 버튼컴포넌트는 위처럼 단순한 버튼말고도 여러 종류의 버튼제작이 가능합니다.이번 강좌에서는 다음 종류의 버튼들에 대해서 다뤄보고자 합니다. ▷ 기본버튼 ▷ 토글버튼▷ 메뉴버튼▷ 분할된 메뉴버튼▷ 그룹버튼▷ 크기별 버튼 우선 코드와 실행결과를 먼저 확인 후, 이어서 설명하도록 하겠습니다. ▶ 샘플코드 ▶ 실행결과 간격문제로 인해서 상단과 하단 툴바를 생성하여 각각 버튼을 생성하였으며, 패널 body영역에는 사이즈별로 버튼을 추가하였습니다. 각 코드를 보면서 설명을 진행하도록 하겠습니다. 1. items에 정의된 코드 설명 items : [ // Button Small Size { xtype : 'button', text : 'small', scale : 'small' }, // But..

이전 강좌에서 진행한 기본패널코드를 이용하여 타이틀의 위치변경과 툴바 생성 및 포지션 변경에 대해서 알아보도록 하겠습니다. 위치 변경 역시 Configs 속성값 하나만 추가해주시면 타이틀을 원하는 위치에 놓을 수 있습니다.패널 타이틀의 위치변경에 대한 속성은 "headerPosition" 입니다.해당 Configs에 지정해줄수 있는 value값은 다음과 같습니다.headerPosition : 'top' or 'bottom' or 'left' or 'right' 선언하지 않을 시, default 'top'이 지정됩니다. 각 포지션별 위치를 한 화면에 확인을 하기 위하여 기존의 body태그에 renderTo를 적용해주었으나, 이번에는 4개의 패널을 한번에 출력시키기위하여 div태그 4개를 작성하고 각 태그들..

이번장부터 본격적으로 각 대표적인 컴포넌트들을 생성해보고, 생성한 컴포넌트들의 Configs 설정만으로 화면을 제작할 수 있습니다. 오늘은 컴포넌트들을 붙이기 위하여 도화지 역할을 하는 패널에 대해 알아보도록 하겠습니다. 이전 기본 문법 습득 및 ExtJS가 무슨역할을 하는 녀석인지 알아보기위해 자주 생성했던 컴포넌트입니다. 1. 기본패널 기존의 샘플용으로 제작했던 Gray 테마대신 Neptune 테마로 변경하여 코드작업을 해봤습니다. ▶ 샘플코드 ▶ 실행결과 WIDTH/HEIGHT 를 준 크기만큼으로 패널이 생성되었습니다. 영역을 제외한 나머지 공간은 회색으로 덮어져있습니다. 아까 적은 것처럼 하얀 도화지(= 'panel') 가 되었군요. 2. 기본패널 + TITLE ▶ 샘플코드 ▶ 실행결과 title..

이번 장에서는 컴포넌틑 생성 후, 해당 컴포넌트들이 지원하는 이벤트 핸들러를 일부 이용하여 강의를 시작해보겠습니다. 자바스크립트,는 이벤트를 적용하기 위해서 onClick / onKeyup 등과 같은 속성의 함수를 정의해서 동작을 시켜줍니다.그리고 jQuery의 경우 자바스크립트처럼 태그의 속성을 이용하여 호출하는 방법이나 스크립트의 $(XXX).click / $(XXX).keyUp 등을 이용하여 특정 태그의 이벤트 핸들러를 선언합니다. 이처럼 ExtJS에서 제공되는 각종 다양한 컴포넌트들 또한 이벤트 핸들링이 다양하며, 이벤트들을 각각 어떻게 적용해야 하는지 설명을 진행해보도록 하겠습니다. 지난 포스팅의 API 문서사이트 관련 내용을 숙지 하신 후 진행하시길 바랍니다. ExtJS 기초강좌 5 - Ext..

이번 시간에는 ExtJS 관련 문법에 대해서 간단히 이해를 돕도록 해보겠습니다. ExtJS 기본구조 ExtJS의 기본문법의 틀은 JSON 규격을 따르고 있습니다. 단일 속성일 경우, "{ }" 다중 속성일 경우, "[ {},{} ]" JSON 규격에 대해서 익숙하신 분들이시라면, ExtJS에 크게 거부감을 느끼지 않으실겁니다. ExtJS onload 함수지금까지 작성해온 샘플 코드들을 보시면, Ext.onReady(function(){ // code here }); 위와 같은 코드를 이용하였습니다.ExtJS MVC에서는 별도로 위와같이 "Ext.onReady"를 사용하지 않아도 되지만, 무슨 기능을 하는 문법인지 이해를 하고 넘어가도록 하겠습니다. ExtJS 기초강좌 1 에서도 설명드렸다시피, ONLOA..

지난시간에 이어서 ExtJS에서 제공하는 다양한 레이아웃에 대하여 포스팅을 해보도록 하겠습니다.▶ "ExtJS 기초강좌 3 - ExtJS에서 지원하는 다양한 레이아웃(1) " 보러가기 이번장에 다루려는 레이아웃은 다음과 같습니다. ▼1. Fit 레이아웃 2. Form 레이아웃3. HBox/VBox 레이아웃4. Table 레이아웃 Fit 레이아웃 자동으로 레이아웃내에 있는 항목들을 컨테이너 내에 가득채워지게 확장하는 레이아웃의 기본 클래스 입니다.별도의 속성을 정의해서 구현할 필요가 없습니다.▶ layout : 'fit' 적용 전 샘플 코드▶ layout : 'fit' 적용 전 결과 화면코드를 보시면 layout : 'fit' 코드를 임시로 주석 처리 후, frame : true 라는 속성이 추가로 작성해..

ExtJS 자체적으로 지원하는 레이아웃 종류에 대해서 알아보도록 하겠습니다. 이번장에서 다루고자 하는 레이아웃의 종류는 다음과 같습니다. ▼ 1. Absolute 레이아웃 2. Accordion 레이아웃 3. Border 레이아웃 4. Box 레이아웃 5. Card 레이아웃 6. Center 레이아웃 7. Column 레이아웃 Absolute 레이아웃Ext.layout.container.Anchor 클래스의 고정을 계승하고, 표준적인 x/y 축의 config 옵션을 이용하여 X/Y 좌표로 위치 결정을 위한 기능을 추가한 레이아웃입니다. ▶ 샘플 코드 ▶ 결과 화면 위 처럼 패널을 생성 후 layout의 속성을 "absolute'라고 준 후, x/y 에대한 위치값을 설정해주었습니다. 브라우저 및 새로고침을..

지난시간에 ExtJS 5.1 GPL 버전을 다운로드 받고 연동하는 법까지 해봤습니다. ▶ "ExtJS 기초강좌 1 - ExtJS 5.1 GPL 다운로드 및 연동하기" 보러가기 오늘은 ExtJS에서 제공하는 각종 다야한 테마들에 대해서 알아보도록 하겠습니다. 연동작업을 했을때 "packages"라는 폴더를 이용했었습니다. 이 "packages" 디렉토리를 들어가 보시면 하단과 같이 ext-theme-xxxx 와 같은 디렉토리들이 여러가지가 존재할 것입니다. ▶ 테마 폴더명 ext-theme-aria - 블랙 계열의 테마ext-theme-classic- 푸른계열의 클래식 테마ext-theme-classic-sandbox - 현재는 지원안하는 테마인듯...ext-theme-crisp - ExtJS 5부터 지원..

ExtJS 첫번째 무료 강좌를 시작해보도록 하겠습니다. ExtJS 프레임워크 다운로드를 하기 위해서는 센차 홈페이지를 방문하여 다운로드를 받으면 되겠습니다. 그러나 얼마전에 홈페이지 리뉴얼이 되는바람에 링크주소와 페이지들이 모두 바뀌었네요.. 30일 평가판버전을 받을 수 있는 버튼만 상단 메뉴부분에 존재하여 처음에는 "GPL 버전을 사이트에서 제거했나?"라는 생각을 가졌습니다. 하지만, 결국 GPL 버전을 찾아냈습니다.!! 센차쪽 라이센스는 모호한 부분이 많으므로 자세히 확인하신 후 실무에 사용하셔야 합니다. 저는 그냥 GPL버전으로 강좌를 진행하겠습니다. ▶ ExtJS 5.1 GPL 다운로드 바로가기 입력하신 메일주소로 센차측에서 보낸 메일이 날라올겁니다. "ext-5.1.1-gpl.zip" 압축파일을..