Coding Story
[ ExtJS ] Toolbar 를 생성하고 위치를 지정하기
( 현 포스팅은 이전 포스팅 "[ ExtJS ] Button을 만들고 Event Listeners 달기." 에서 사용한 test.html 파일을 사용한다. ) 이전 포스팅에선 간단한 레이아웃에 버튼을 달고 이벤트를 적용시켜보았다. 이번엔 자주 이용하는 기능을 버튼 등으로 만들어 나란히 모아놓은 메뉴바인 Toolbar 를 추가해, 각 버튼을 좀 더 작관적으로 나누고 위치를 지정해보자. ExtJS 는 panel 에 Toolbar 를 만드는 속성으로 다음과 같은 방법 등을 지원한다. 1. dockedItems 2. Xbar 이제 순서대로 사용해 Toolbar 를 만들어 보자. 현재 기존의 test.html 의 코드는 아래와 같다. test.html dockedItems ExtJS 는 도구를 모아놓은 영역을 기..
[ ExtJS ] Button을 만들고 Event Listeners 달기.
이전 포스팅에서 언급한 Hbox, Vbox 로 간단한 화면을 만들어 버튼을 추가해보자. 먼저, 아래의 코드를 가진 test.html 이 있다고 가정하자. 여기서 xtype 은 input component 라고 생각하면 된다. textfield, datafield, numberfield 등 여러 type 을 지원하며, default 는 textfield 로 잡혀있다. 그리고 layout 은 vbox 이므로 item 들을 세로로 정렬해준다. 현재 test.html 의 실행화면은 아래와 같다. 자, 이제 버튼을 추가해보자. 아래와 같이 코드를 수정한다. 그럼 아래처럼 First Button 과 Second Button 이 생성된다. 이제 각 버튼을 클릭할 때 메세지 창을 띄우도록 이벤트를 추가해보자. 버튼에 ..
[ ExtJS ] ExtJS의 레이아웃 Layout
ExtJS 는 기본적으로 Accordion, Border, Tab 등 여러가지 레이아웃을 제공한다. 어떤 레이아웃들이 있는지 설명과 예제를 보며 이해해보자. Accordion Layout ? 요약 되어진 하나의 패널의 Title 을 클릭하게 되면 이를 확장해 해당하는 Content 는 보여주고, 그 외의 Content 는 감춰주는 형식의 스타일을 가진 레이아웃이다. Accordion Layout Example Code Ext.create("Ext.container.Viewport",{ renderTo: Ext.getBody(), layout: 'accordion', items:[ { title: 'First Title', html: 'First Content' }, { title: 'Second Titl..
[ ExtJS ] ExtJS 기초 문법, 그리고 Border Layout.
ExtJS 란? ExtJS 는 Client-Side 기반의 JavaScript Framework 이다. 이는 수백가지가 넘는 강력한 UI 컴포넌트를 지원하며, Classic, Gray, Crisp 등의 여러 테마 또한 지원한다. 컴포넌트 제작은 key value 형태를 가진 JSON 구조로 생성된다. 현 포스팅에선 ExtJS 설치 방법 포스팅에서 사용한 test.html 파일을 다룬다. 먼저, ExtJS 의 기초문법 몇 가지를 살펴보자. Ext.onReady() Ext.onReady(function() { ... }); Ext.onReady(function() { ... } ) 은 기존 JavaScript 의 window.onload 와, JQuery 의 $(document).ready(function(..
[ 설치 ] ExtJS 설치하고 HelloWorld 띄워보기
JAVASCRIPT 의 프레임 워크 중 하나인 ExtJS 를 설치해보고, 국룰에 맞춰 HelloWorld 알림메세지를 띄워보자. 현 포스팅은 공부의 목적으로 GPL 버전으로 설치했음. 실무에서 사용할 목적일 경우 sencha 쪽 라이센스를 자세히 확인해보고 해당 버전을 이용해야한다. * 현 포스팅의 방법말고 sencha cmd 로 설치해도 상관없다. 먼저 아래의 링크로 접속한다. www.sencha.com/legal/GPL/ 필수 입력란에 전부 입력 후, ExtJS 체크하고 GET SDK 버튼을 클릭한다. 본인이 입력한 이메일로 가서 확인해보면 메일이 올 것이다. ExtJS GPL 다운로드 클릭. 설치된 ExtJS 의 파일 구조는 아래와 같다. build 하위의 classic 폴더와 ext-all.js ..