All Story
[ ExtJS ] 버튼을 클릭해 팝업창 띄우기 ExtJS Popup
이번 포스팅에선 버튼을 클릭하면 팝업창을 띄우고, 팝업의 각 속성들을 알아보는 내용을 다룬다. style 은 classic/theme-crisp 를 사용 중이고 따로 올리진 않겠다. 먼저 이전 포스팅까지의 test.html 내용을 다 지우고 새로 단순 레이아웃 하나를 만들고 버튼 하나를 추가했다. test.html test.html 실행 결과 이제 Open 버튼을 클릭하면 팝업 하나를 띄워보도록 할 것이다. 그 전에, 팝업을 만들 때 아래와 같은 방법을 이용한다는 걸 눈에 익혀두자. 1. 팝업이 생성될 때 자동으로 열리게 하는 방법 Ext.create('Ext.window.Window', { autoShow: true, //팝업이 생성된 후 자동으로 보여줌 width: 200, height: 200, t..
[ 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(..