반응형
[Source Link]
ExtStart.js
Ext.onReady는 반드시 가장 처음으로 호출되는 메소드입니다. 모든 DOM의 로딩이 완료되어야 이 메소드가 자동으로 호출되므로 이 메소드 내부의 코드는 페이지 내 모든 엘리먼트에 접근이 가능합니다.
- Element: Ext 심장
이 코드는 잘 실행되긴 하지만 여기서 반환되는 객체는(DOM node) 쓰기 쉽지는 않고 기능이 강력하지 않습니다. 반환된 node를 유용하게 사용하려면 많은 추가코드를 작성해야 합니다. 게다기 브라우저 별 호환성에 대해서도 고려를 해야하므로 짜증 만땅이라 할 수 있지요. (변역이 참 재밌습니다.)
이제 Ext.Element 객체를 살펴봅시다. 정말 Ext의 심장과도 같은 이 객체는 엘리먼트에 접근하거나 기능을 실행할고 할때 필요합니다. Element API는 Ext 라이브러리에 입문하려고 할때 기초가 되며 여러분이 Ext에서 오직 하나의 클래스만 배울 시간만 가지고 있다면 Element를 선택하세요!
앞의 예제 코드에 대응되는 Ext Element로 ID를 얻어내는 코드는 아래와 같습니다.
이제 Element 객체로 다시 돌아가서... 왜 흥미를 가져야 할까요?
1.Element 클래스는 대부분의 기존 DOM 매소드와 프로퍼티를 포함하고 있는데, 이로 인해 편리성, 통합성, 브라우저간 호환성이 있는 DOM 인터페이스를 얻게 됩니다.
2.Element.get() 메소드는 내부 캐쉬를 사용하며 따라서 동일한 객체를 반복해서 호출할 때 겁나(^^) 빠른 속도를 얻어 올수 있습니다.
3.브라우저간 호환성 문제가 없는 Element 메소드들을 통해서 DOM 노드에 대한 대부분의 작업이 수행됩니다.
- DOM node들 선택하기
종종 DOM 노드를 ID로 선택하는게 불가능 하거나 비효율적일 경우가 있습니다. 엘리먼트에 ID가 설정되어 있지 않거나 설정된 ID를 모를때, 혹은 ID로 참조할 요소가 너무 많을 경우에는 여러분은 엘리먼트에 설정된 어떤 프로퍼티 값이나 설정된 CSS 클래스명으로 선택한다던가하는 먼가 다른 방법이 필요할 겁니다. 이런 경우를 위해서 Ext에서는 DomQuery라고 불리는 극악 강력한(--;) DOM 선택 라이브러리를 제공합니다.
예제는 Element.select를 아주 손쉽게 사용하는 방법을 보여줍니다. 여기서 반환되는 객체는 CompositeElement로 Element 인터페이스를 통하여 내부 엘리먼트에 접근할 수 있게 해줍니다. 이것은 반복문과 개별접근이 없이 Element.select로 손쉽게 모든 엘리먼트의 인스턴스를 리턴 받을수 있게 해줍니다.
DomQuery는 W3C CSS3 DOM selector의 기본 Xpath 그리고, HTML 프로퍼티를 포함하는 폭넓은 선택 옵션을 지원합니다.
- 이벤트 응답
지금까지 예제에서는 우리가 작성한 코드는 모두 onReady 함수 내에 직접 작성되었습니다. 이것이 뜻하는 바는 이것들은 항상 페이지의 로드가 완료된 즉시 실행이 된다는 것입니다. 이것은 우리에게 많은 제어권을 주지 못합니다. 여러분은 제어를 위해 코드가 특정 상황 혹은 이벤트에 응답하게끔 하고 싶을 겁니다. 이것을 하려면 이벤트 처리를 하는 함수를 이벤트 핸들러로 정의 해야합니다.
간단한 예제부터 시작하면 ExtStart.js를 열어서 아래와 같이 수정합니다.
코드는 아직까지 페이지가 로드 완료이후에 실행되지만 한가지 다른점은 함수내에 alert()이 선언되어 있는데 즉시 실행되지 않습니다. 이 부분은 버튼의 클릭 이벤트에 대한 "핸들러"로 지정되어 있기 때문입니다.
놀라지 마세요.(^^) Element.select는 같은 기능을 제공하지만 한번에 모든 요소 그룹을 가져올수 있습니다. 예를 들어, 우리 태스트 페이지 내에 모든 문단을 클릭 했을때 메시지를 보여주려면 다음과 같이 해봅시다.
여기 두개의 예제 내에서 이벤트 처리함수는 함수명이 없이 단순히 인라인(inline)으로 선언되어 있습니다. 이러한 종류의 함수를 "익명함수(anonymous function)"라고 하는데 물론 이름이 있는 함수도 이벤트 처리용으로 할당 할 수 있습니다. 아래 예제 코드는 앞서의 예제와 동일한 기능을 수행합니다.
여기까지 우리는 이벤트가 발생되었을때 일반적인 처리를 하는 방법을 살펴 보았습니다. 하지만 이벤트가 발생한 엘리먼트 자체에 대한 어떤 액션을 실행하려고 할때, 해당 엘리먼트를 어떻게 알아 낼 수 있을까요?
물론 간단히 찾아 낼 수 있습니다.
Element.on 메소드는 이벤트 핸들링 함수에 3개의 완전 유용한 파라메터를 전달합니다.(여기서는 첫번째 1개만 살펴봅니다. 나머지는 API문서를 참조하세요.) 앞서 예제에서는 핸들링 함수에 파라메터가 생략되어 있습니다. 하지만 조금만 바꿔서 부가적인 기능을 추가시킬수 있습니다. 첫번째(가장 중요한) 파라메터는 발생된 이벤트입니다. 이것은 사실 Ext 이벤트 객체인데, 표준 브라우저 이벤트 보다 브라우저간 호환성이 있고 더욱 많은 정보를 제공합니다. 예를들어, 아래처럼 가단한 코드 추가만으로 이벤트의 traget으로 설정된 DOM 노드를 구할수 있습니다.
target이 DOM 노드라는 것을 기억하시고, 이제 이벤트가 발생된 엘리먼트를 구해서 원하는 액션을 수행할 수 있게 되었습니다. 예제를 실행해보면 모든 문단에 하이라이트가 되는 것을 볼수 있습니다.
- 위젯 사용하기
Ext는 지금까지 설명한 코어 자바스크립트 라이브러리 외에 추가적으로 풍부한 자바스크립트 UI위젯들을 제공합니다. 본 문서에서 설명하기에는 분량이 너무 많으므로 주로 사용되는 몇가지를 얼마나 쉽게 사용할수 있는지 알아보겠습니다.
1.MessageBox
지루한 "Hello World" 메시지 박스 띄우기 대신 다른것을 해 봅시다. 우리는 이전에 섹션에서는 각각 문단을 클릭했을때 하이라이트가 되는 코드를 작성했는데 이번에는 클릭했을때 나타나는 메시지 박스 안에 문장의 글이 보이게끔 수정해봅시다. 아래 paragraphClicked 함수를 고쳐봅시다.
여기서 다루어 볼만한 가치가 있는 몇가지 새로운 컵셉이 눈에 띠는군요. 첫라인에서 paragraph라는 이름으로 지역변수(전역변수 아닌가요? --;)를 생성 했으며 클릭이 발생한 DOM 노드의 엘리먼트 참조를 가지고 있게 했습니다.(이번에는 오직 <p> 태그들만 클릭 이벤트와 연계되므로 항상 입력되는 것을 알 수 있습니다.)
왜 이렇게 해야 할까요? 우리는 하이라이트 시키기 위한 엘리먼트의 참조가 필요하며 메시지박스를 위한 인자로 동일한 엘리먼트를 필요하기 때문입니다. 일반적으로 동일한 값 또는 객체 참조를 얻기 위해 동일한 함수를 여러번 호출하는 것은 나쁜습관(--;)이므로 지역 변수에 할당하여 재사용합니다. 이렇게 하면 우리는 착한 객체지향 개발자가 되는 겁니다!
이제 메시지박스호출 부분을 살펴봅시다. 또 다른 새로운 컨셉이 보이는데 단순히 메소드에 인자 리스트를 전달하는 것처럼 보이지만 자세히 살펴보면 매우 특이한 문법이 보일겁니다. 사실 MessageBox.show()에는 오직 하나의 인자만 전달되고 있는데 프로터피와 값의 집합을 담고 있는 객체 문자열(literal)입니다. 자바스크립트에서 객체 문자열은 이름/값 프로퍼티 리스트를 {와}로 감싸서 언제든지 동적으로 생성시킬수 있습니다. 형식은 [프로퍼티 이름]:[프로퍼티 값] 으로 표기하며 이 패턴은 Ext 곳곳에서 널리 사용되기 때문에 금방 익술해질겁니다.
왜 객체 문자열(literal)을 사용하냐구요? 가장 큰 이유는 유연성입니다. 객체 문자열(literal)을 사용하면 아무때나 프로퍼티나 추가/삭제 되거나 순서가 변경되더라도 메소드의 시그니쳐(인자의 개수와 타입) 예를 들어 foo.action 이라는 가상의 메소드가 있다고 하고 네개의 옵션인자가 있다고 가정합니다. 그런데 오직 하나만 전달하는 상황이라면 코드를 다음과 같이 작성해야겠지요.
그러나 객체 문자열(literal)을 사용하게 된다면 다음과 같이 하면 됩니다.
무척 사용하기 쉽고 가독성도 더 좋습니다.
2.Grid
그리드는 Ext의 가장 인기있는 위젯 중 하나인데 사람들이 첫번째로 보고 싶어하는 것이기도 합니다. 자 이제 기초적인 그리드를 만들고 실행시키는 것이 얼마나 쉬운지 살펴보겠습니다. ExtStart.js 파일을 열어서 아래와 같이 코드를 수정해봅시다.
코드가 길어 보이지만 실제로는 오직 4 line Code 뿐입니다. (태스트 데이타를 제외하면 3 Line Code)!
1.첫라인은 그리드에 보여줄 태스트 데이타를 생성, 실제로는 DB에서 데이타를 가져오겠죠.
2.다음은 데이터 리더를 생성하였는데 그리드 내 데이터 스토어에 담기 위해 데이터를 어떻게 읽어 들이고 레코드로 변환할지 설정합니다. 다양한 데이터 타입을 위한 각각의 리더 클래스가 있습니다.
3.다음으로 그리드 위젯을 생성하는데 아래와 같은 설정 값들을 전달합니다.
- 새로운 데이타 스토어, 생성한 태스트 데이터와 리더가 설정되어 있습니다.
- Columns에 칼럼 모델 정의를 합니다.
- 추가옵션으로 그리드의 기능 설정을 할수 있습니다.
4.마지막으로 SelectionModel을 사용해 첫번째 행을 하이라이트 시킵니다.
무척 간단하지요? (--;;) 잘 되었다면 아래와 같이 보일 겁니다.
물론 이런 코드를 가지고 자세한 부분까지 이해할 수는 없습니다. 이 예제의 목적은 풍부하고 시각적으로 복잡한 사용자 인터페이스 컴포넌트를 최소한의 코드만으로 작성할 수 있다는 것을 보여주는데 있습니다.
자세한 내용은 독자들의 숙제로 남깁니다. 그리드를 배우는데 도움이 되는 많은 내용들이 interactive grid damos와 GridPanel API documentation 에 포함되어 있습니다.
3.그리고 다른 것들...
지금 우리가 살펴본 것은 빙산의 일각(--;)에 불가합니다. Ext에 있는 수십개의 UI위젯들이 있습니다. 자동 페이지 레이아웃, 탭, 메뉴, 다이어로그, 트리뷰 등등. interactive examples 에서 모두 살펴보시기 바랍니다.
- Ajax 사용하기
페이지를 만들고 자바스크립트로 상호작용하는 것을 알게 되었습니다. 이제 여러분은 서버의 데이터베이스에서 가져오거나 저장하는 것과 같은 원격 서버에서 데이터를 가져오는 방법을 알고 싶을 겁니다. 자바스크립트를 이용하며 비동기적으로 페이지 리로딩 없이 처리하는 방식은 Ajax 라고 알려져 있는데 Ext는 Ajax를 지원합니다. 예를 들어 사용자와의 상호작용을 처리하여 서버에 비동기로 전송하고 응답하는 UI의 엘리먼트를 갱신하는 것인데 여기에 택스트 입력 박스, 버트, 메시지를 표시하기 위한 div를 포함하고 있는 간단한 HTML 폼으로 구성된 예제를 살펴봅시다.
ExtStart.html
ExtStart.js
아마도 일반적인 패턴은 지금과 비슷하게 시작할겁니다! 이 코드는 okButton을 Element 객체로 래핑시키고 버튼 클릭 이벤트를 처리하는 익명함수로 연결시키고 있습니다. 클릭 핸들러 내에서는 Updater라고 불리우는 특별한 내부 클래스를 사용하는데 이 클래스는 손쉽게 Ajax 응답을 주고 받고 다른 엘리먼트를 갱신합니다.
Updater는 직접 호출하거나 여기에서처럼 갱신을 원하는 Element(여기서는 'msg' div)에 Element.load를 사용하여 접근하게 되는데 Element.load가 호출되었을 때 서버 측의 응답이 자동으로 Element의 innerHTML로 변경됩니다. 그리고 서버에서 응답을 처리할 URL과 인자값(여기서는 'name'필드의 값을 전달) 그리고 요철 처리 중간에 엘리먼트의 innerHTML에 표시할 메시지를 전달하고, Msg div(디폴트 값이 hidden으로 되어있음)가 보이게하면 됩니다.
물론 Ext 내 다른 부분들처럼 Updater에 많은 옵션들이 제공 되고 있으며 이것으로 여러 다양한 상황에서 Ajax요청을 필요에 맞는 방식으로 처리할수 있습니다. (Ajax 직접 접근은 Ext.Ajax 클래스를 살펴보시기 바랍니다) 하지만 여기에서는 기본적인 예제와 실행을 보여드렸습니다.
Ajax 퍼즐의 마지막 조각은 요청과 페이지로 보내는 응답을 담당하는 웹서버측의 처리부분입니다. 이 부분은 서버페이지, 서블릿, HTTP 핸들러, 웹서비스, 펄 혹은 CGI 스크립트 외에 웹 서버 측에서 HTTP 요청을 처리할 수 있는 어떤 기술도 될수 있겠습니다.
결국 이런 다양함으로 인해 표준적인 예제를 제공할 방법이 없습니다. 그래서 주로 사용되는 몇가지 언어로 예제를 만들었는데 독자에게 도움이 되었으면 합니다. (이 코드는 단순히 'name' 필드로 전달되는 입력 값을 다시 클라이언트 측에 'from Server: '에 붙여서 전달하고 'msg' div에 기록됩니다.) PHP 예제는 'ajax-example.php'로 다운로드를 제공하고 있지만 여러분의 서버에 맞는 코드로 수정해서 사용하시기 바랍니다.
ajax-example.php
실전에서는 Ajax 처리를 할때는 정확한 처리와 서버에서 오는 데이터 구조를 다루기 위해 땜방코드(--;)를 필요로 합니다. 사람들이 주로 사용하는 몇가지 포맷이 있는데(대부분 JSON or XML) Ext가 서버측 언어에 중립적인 것처럼 Ajax처리를 위해 많은 특정 언어 기반의 라이브러리가 Ext와 잘 연동됩니다.
페이지로 오는 데이터의 구조가 올바르면 서버의 어떠한 동작 방식에도 신경쓰지 않습니다.(^^) 서버측 프레임워크와 툴에 대한 부가적인 정보를 얻고 싶으면 우리의 platfrom-specific resources 목록을 살펴보시기 바랍니다.
- What's Next?
이제 Ext가 무엇이고 어떤 것을 제공하는지 맛을 살짝 보았습니다. 다음 단계로 진입하기 위해 도움이 될 많은 자료가 여러분을 기다라고 있습니다.
#Next Topic: Basic Login
IntroToExt2.zipAuthor: Brian Moeskau (변역:김재형)
Published: Novermber 1, 2007
Ext Version: 2.0
Last Modified: 2008.2.17 14:55
Summary: 2008.10.9 16:40 (Roundworld)
Published: Novermber 1, 2007
Ext Version: 2.0
Last Modified: 2008.2.17 14:55
Summary: 2008.10.9 16:40 (Roundworld)
ExtStart.js
Ext.onReady(function(){
alert("Congratulations! You have Ext configured correctly!");
});
alert("Congratulations! You have Ext configured correctly!");
});
Ext.onReady는 반드시 가장 처음으로 호출되는 메소드입니다. 모든 DOM의 로딩이 완료되어야 이 메소드가 자동으로 호출되므로 이 메소드 내부의 코드는 페이지 내 모든 엘리먼트에 접근이 가능합니다.
- Element: Ext 심장
var myDiv = document.getElementById('myDiv');
이 코드는 잘 실행되긴 하지만 여기서 반환되는 객체는(DOM node) 쓰기 쉽지는 않고 기능이 강력하지 않습니다. 반환된 node를 유용하게 사용하려면 많은 추가코드를 작성해야 합니다. 게다기 브라우저 별 호환성에 대해서도 고려를 해야하므로 짜증 만땅이라 할 수 있지요. (변역이 참 재밌습니다.)
이제 Ext.Element 객체를 살펴봅시다. 정말 Ext의 심장과도 같은 이 객체는 엘리먼트에 접근하거나 기능을 실행할고 할때 필요합니다. Element API는 Ext 라이브러리에 입문하려고 할때 기초가 되며 여러분이 Ext에서 오직 하나의 클래스만 배울 시간만 가지고 있다면 Element를 선택하세요!
앞의 예제 코드에 대응되는 Ext Element로 ID를 얻어내는 코드는 아래와 같습니다.
Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});
var myDiv = Ext.get('myDiv');
});
이제 Element 객체로 다시 돌아가서... 왜 흥미를 가져야 할까요?
1.Element 클래스는 대부분의 기존 DOM 매소드와 프로퍼티를 포함하고 있는데, 이로 인해 편리성, 통합성, 브라우저간 호환성이 있는 DOM 인터페이스를 얻게 됩니다.
2.Element.get() 메소드는 내부 캐쉬를 사용하며 따라서 동일한 객체를 반복해서 호출할 때 겁나(^^) 빠른 속도를 얻어 올수 있습니다.
3.브라우저간 호환성 문제가 없는 Element 메소드들을 통해서 DOM 노드에 대한 대부분의 작업이 수행됩니다.
- DOM node들 선택하기
종종 DOM 노드를 ID로 선택하는게 불가능 하거나 비효율적일 경우가 있습니다. 엘리먼트에 ID가 설정되어 있지 않거나 설정된 ID를 모를때, 혹은 ID로 참조할 요소가 너무 많을 경우에는 여러분은 엘리먼트에 설정된 어떤 프로퍼티 값이나 설정된 CSS 클래스명으로 선택한다던가하는 먼가 다른 방법이 필요할 겁니다. 이런 경우를 위해서 Ext에서는 DomQuery라고 불리는 극악 강력한(--;) DOM 선택 라이브러리를 제공합니다.
// Hightlights every paragraph
Ext.select('p').hightlight();
Ext.select('p').hightlight();
예제는 Element.select를 아주 손쉽게 사용하는 방법을 보여줍니다. 여기서 반환되는 객체는 CompositeElement로 Element 인터페이스를 통하여 내부 엘리먼트에 접근할 수 있게 해줍니다. 이것은 반복문과 개별접근이 없이 Element.select로 손쉽게 모든 엘리먼트의 인스턴스를 리턴 받을수 있게 해줍니다.
DomQuery는 W3C CSS3 DOM selector의 기본 Xpath 그리고, HTML 프로퍼티를 포함하는 폭넓은 선택 옵션을 지원합니다.
- 이벤트 응답
지금까지 예제에서는 우리가 작성한 코드는 모두 onReady 함수 내에 직접 작성되었습니다. 이것이 뜻하는 바는 이것들은 항상 페이지의 로드가 완료된 즉시 실행이 된다는 것입니다. 이것은 우리에게 많은 제어권을 주지 못합니다. 여러분은 제어를 위해 코드가 특정 상황 혹은 이벤트에 응답하게끔 하고 싶을 겁니다. 이것을 하려면 이벤트 처리를 하는 함수를 이벤트 핸들러로 정의 해야합니다.
간단한 예제부터 시작하면 ExtStart.js를 열어서 아래와 같이 수정합니다.
Ext.onReady(function() {
Ext.get('myButton').on('click', function() {
alert("You clicked the button");
});
});
Ext.get('myButton').on('click', function() {
alert("You clicked the button");
});
});
코드는 아직까지 페이지가 로드 완료이후에 실행되지만 한가지 다른점은 함수내에 alert()이 선언되어 있는데 즉시 실행되지 않습니다. 이 부분은 버튼의 클릭 이벤트에 대한 "핸들러"로 지정되어 있기 때문입니다.
놀라지 마세요.(^^) Element.select는 같은 기능을 제공하지만 한번에 모든 요소 그룹을 가져올수 있습니다. 예를 들어, 우리 태스트 페이지 내에 모든 문단을 클릭 했을때 메시지를 보여주려면 다음과 같이 해봅시다.
Ext.onReady(function(){
Ext.select('p').on('click',function(){
alert("You clicked a paragraph");
});
});
Ext.select('p').on('click',function(){
alert("You clicked a paragraph");
});
});
여기 두개의 예제 내에서 이벤트 처리함수는 함수명이 없이 단순히 인라인(inline)으로 선언되어 있습니다. 이러한 종류의 함수를 "익명함수(anonymous function)"라고 하는데 물론 이름이 있는 함수도 이벤트 처리용으로 할당 할 수 있습니다. 아래 예제 코드는 앞서의 예제와 동일한 기능을 수행합니다.
Ext.onReady(function(){
var paragraphClicked = function(){
alert("U clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
var paragraphClicked = function(){
alert("U clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
여기까지 우리는 이벤트가 발생되었을때 일반적인 처리를 하는 방법을 살펴 보았습니다. 하지만 이벤트가 발생한 엘리먼트 자체에 대한 어떤 액션을 실행하려고 할때, 해당 엘리먼트를 어떻게 알아 낼 수 있을까요?
물론 간단히 찾아 낼 수 있습니다.
Element.on 메소드는 이벤트 핸들링 함수에 3개의 완전 유용한 파라메터를 전달합니다.(여기서는 첫번째 1개만 살펴봅니다. 나머지는 API문서를 참조하세요.) 앞서 예제에서는 핸들링 함수에 파라메터가 생략되어 있습니다. 하지만 조금만 바꿔서 부가적인 기능을 추가시킬수 있습니다. 첫번째(가장 중요한) 파라메터는 발생된 이벤트입니다. 이것은 사실 Ext 이벤트 객체인데, 표준 브라우저 이벤트 보다 브라우저간 호환성이 있고 더욱 많은 정보를 제공합니다. 예를들어, 아래처럼 가단한 코드 추가만으로 이벤트의 traget으로 설정된 DOM 노드를 구할수 있습니다.
Ext.onReady(function() {
var paragraphClicked = function(e){
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
var paragraphClicked = function(e){
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
target이 DOM 노드라는 것을 기억하시고, 이제 이벤트가 발생된 엘리먼트를 구해서 원하는 액션을 수행할 수 있게 되었습니다. 예제를 실행해보면 모든 문단에 하이라이트가 되는 것을 볼수 있습니다.
- 위젯 사용하기
Ext는 지금까지 설명한 코어 자바스크립트 라이브러리 외에 추가적으로 풍부한 자바스크립트 UI위젯들을 제공합니다. 본 문서에서 설명하기에는 분량이 너무 많으므로 주로 사용되는 몇가지를 얼마나 쉽게 사용할수 있는지 알아보겠습니다.
1.MessageBox
지루한 "Hello World" 메시지 박스 띄우기 대신 다른것을 해 봅시다. 우리는 이전에 섹션에서는 각각 문단을 클릭했을때 하이라이트가 되는 코드를 작성했는데 이번에는 클릭했을때 나타나는 메시지 박스 안에 문장의 글이 보이게끔 수정해봅시다. 아래 paragraphClicked 함수를 고쳐봅시다.
Ext.get(e.target).highlight();
↓var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width: 400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width: 400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
여기서 다루어 볼만한 가치가 있는 몇가지 새로운 컵셉이 눈에 띠는군요. 첫라인에서 paragraph라는 이름으로 지역변수(전역변수 아닌가요? --;)를 생성 했으며 클릭이 발생한 DOM 노드의 엘리먼트 참조를 가지고 있게 했습니다.(이번에는 오직 <p> 태그들만 클릭 이벤트와 연계되므로 항상 입력되는 것을 알 수 있습니다.)
왜 이렇게 해야 할까요? 우리는 하이라이트 시키기 위한 엘리먼트의 참조가 필요하며 메시지박스를 위한 인자로 동일한 엘리먼트를 필요하기 때문입니다. 일반적으로 동일한 값 또는 객체 참조를 얻기 위해 동일한 함수를 여러번 호출하는 것은 나쁜습관(--;)이므로 지역 변수에 할당하여 재사용합니다. 이렇게 하면 우리는 착한 객체지향 개발자가 되는 겁니다!
이제 메시지박스호출 부분을 살펴봅시다. 또 다른 새로운 컨셉이 보이는데 단순히 메소드에 인자 리스트를 전달하는 것처럼 보이지만 자세히 살펴보면 매우 특이한 문법이 보일겁니다. 사실 MessageBox.show()에는 오직 하나의 인자만 전달되고 있는데 프로터피와 값의 집합을 담고 있는 객체 문자열(literal)입니다. 자바스크립트에서 객체 문자열은 이름/값 프로퍼티 리스트를 {와}로 감싸서 언제든지 동적으로 생성시킬수 있습니다. 형식은 [프로퍼티 이름]:[프로퍼티 값] 으로 표기하며 이 패턴은 Ext 곳곳에서 널리 사용되기 때문에 금방 익술해질겁니다.
왜 객체 문자열(literal)을 사용하냐구요? 가장 큰 이유는 유연성입니다. 객체 문자열(literal)을 사용하면 아무때나 프로퍼티나 추가/삭제 되거나 순서가 변경되더라도 메소드의 시그니쳐(인자의 개수와 타입) 예를 들어 foo.action 이라는 가상의 메소드가 있다고 하고 네개의 옵션인자가 있다고 가정합니다. 그런데 오직 하나만 전달하는 상황이라면 코드를 다음과 같이 작성해야겠지요.
foo.action(null,null,null,'hello')
그러나 객체 문자열(literal)을 사용하게 된다면 다음과 같이 하면 됩니다.
foo.action(
param4: 'hello'
})
param4: 'hello'
})
무척 사용하기 쉽고 가독성도 더 좋습니다.
2.Grid
그리드는 Ext의 가장 인기있는 위젯 중 하나인데 사람들이 첫번째로 보고 싶어하는 것이기도 합니다. 자 이제 기초적인 그리드를 만들고 실행시키는 것이 얼마나 쉬운지 살펴보겠습니다. ExtStart.js 파일을 열어서 아래와 같이 코드를 수정해봅시다.
Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81, '9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',52.55,0.01,0.02,'7/4 1200am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', daeFormat: 'n/j h:ia'}
]);
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width:120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true
});
grid.getSelectionModel().selectFirstRow();
});
var myData = [
['Apple',29.89,0.24,0.81, '9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',52.55,0.01,0.02,'7/4 1200am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', daeFormat: 'n/j h:ia'}
]);
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width:120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true
});
grid.getSelectionModel().selectFirstRow();
});
코드가 길어 보이지만 실제로는 오직 4 line Code 뿐입니다. (태스트 데이타를 제외하면 3 Line Code)!
1.첫라인은 그리드에 보여줄 태스트 데이타를 생성, 실제로는 DB에서 데이타를 가져오겠죠.
2.다음은 데이터 리더를 생성하였는데 그리드 내 데이터 스토어에 담기 위해 데이터를 어떻게 읽어 들이고 레코드로 변환할지 설정합니다. 다양한 데이터 타입을 위한 각각의 리더 클래스가 있습니다.
3.다음으로 그리드 위젯을 생성하는데 아래와 같은 설정 값들을 전달합니다.
- 새로운 데이타 스토어, 생성한 태스트 데이터와 리더가 설정되어 있습니다.
- Columns에 칼럼 모델 정의를 합니다.
- 추가옵션으로 그리드의 기능 설정을 할수 있습니다.
4.마지막으로 SelectionModel을 사용해 첫번째 행을 하이라이트 시킵니다.
무척 간단하지요? (--;;) 잘 되었다면 아래와 같이 보일 겁니다.
 |
물론 이런 코드를 가지고 자세한 부분까지 이해할 수는 없습니다. 이 예제의 목적은 풍부하고 시각적으로 복잡한 사용자 인터페이스 컴포넌트를 최소한의 코드만으로 작성할 수 있다는 것을 보여주는데 있습니다.
자세한 내용은 독자들의 숙제로 남깁니다. 그리드를 배우는데 도움이 되는 많은 내용들이 interactive grid damos와 GridPanel API documentation 에 포함되어 있습니다.
3.그리고 다른 것들...
지금 우리가 살펴본 것은 빙산의 일각(--;)에 불가합니다. Ext에 있는 수십개의 UI위젯들이 있습니다. 자동 페이지 레이아웃, 탭, 메뉴, 다이어로그, 트리뷰 등등. interactive examples 에서 모두 살펴보시기 바랍니다.
- Ajax 사용하기
페이지를 만들고 자바스크립트로 상호작용하는 것을 알게 되었습니다. 이제 여러분은 서버의 데이터베이스에서 가져오거나 저장하는 것과 같은 원격 서버에서 데이터를 가져오는 방법을 알고 싶을 겁니다. 자바스크립트를 이용하며 비동기적으로 페이지 리로딩 없이 처리하는 방식은 Ajax 라고 알려져 있는데 Ext는 Ajax를 지원합니다. 예를 들어 사용자와의 상호작용을 처리하여 서버에 비동기로 전송하고 응답하는 UI의 엘리먼트를 갱신하는 것인데 여기에 택스트 입력 박스, 버트, 메시지를 표시하기 위한 div를 포함하고 있는 간단한 HTML 폼으로 구성된 예제를 살펴봅시다.
ExtStart.html
<div>
Name: <input type="text" id="name" />
<input type="button" id="okButton" value="OK" />
</div>
<div id="msg"></div>
Name: <input type="text" id="name" />
<input type="button" id="okButton" value="OK" />
</div>
<div id="msg"></div>
ExtStart.js
Ext.onReady(function(){
Ext.get('okButton').on('click', function() {
var msg = Ext.get('msg');
msg.load({
url: 'ajax-example.php', //<-- change if nessary
params: 'name=' + Ext.get('name').dom.value,
text: 'Updating...'
});
msg.show();
});
});
Ext.get('okButton').on('click', function() {
var msg = Ext.get('msg');
msg.load({
url: 'ajax-example.php', //<-- change if nessary
params: 'name=' + Ext.get('name').dom.value,
text: 'Updating...'
});
msg.show();
});
});
아마도 일반적인 패턴은 지금과 비슷하게 시작할겁니다! 이 코드는 okButton을 Element 객체로 래핑시키고 버튼 클릭 이벤트를 처리하는 익명함수로 연결시키고 있습니다. 클릭 핸들러 내에서는 Updater라고 불리우는 특별한 내부 클래스를 사용하는데 이 클래스는 손쉽게 Ajax 응답을 주고 받고 다른 엘리먼트를 갱신합니다.
Updater는 직접 호출하거나 여기에서처럼 갱신을 원하는 Element(여기서는 'msg' div)에 Element.load를 사용하여 접근하게 되는데 Element.load가 호출되었을 때 서버 측의 응답이 자동으로 Element의 innerHTML로 변경됩니다. 그리고 서버에서 응답을 처리할 URL과 인자값(여기서는 'name'필드의 값을 전달) 그리고 요철 처리 중간에 엘리먼트의 innerHTML에 표시할 메시지를 전달하고, Msg div(디폴트 값이 hidden으로 되어있음)가 보이게하면 됩니다.
물론 Ext 내 다른 부분들처럼 Updater에 많은 옵션들이 제공 되고 있으며 이것으로 여러 다양한 상황에서 Ajax요청을 필요에 맞는 방식으로 처리할수 있습니다. (Ajax 직접 접근은 Ext.Ajax 클래스를 살펴보시기 바랍니다) 하지만 여기에서는 기본적인 예제와 실행을 보여드렸습니다.
Ajax 퍼즐의 마지막 조각은 요청과 페이지로 보내는 응답을 담당하는 웹서버측의 처리부분입니다. 이 부분은 서버페이지, 서블릿, HTTP 핸들러, 웹서비스, 펄 혹은 CGI 스크립트 외에 웹 서버 측에서 HTTP 요청을 처리할 수 있는 어떤 기술도 될수 있겠습니다.
결국 이런 다양함으로 인해 표준적인 예제를 제공할 방법이 없습니다. 그래서 주로 사용되는 몇가지 언어로 예제를 만들었는데 독자에게 도움이 되었으면 합니다. (이 코드는 단순히 'name' 필드로 전달되는 입력 값을 다시 클라이언트 측에 'from Server: '에 붙여서 전달하고 'msg' div에 기록됩니다.) PHP 예제는 'ajax-example.php'로 다운로드를 제공하고 있지만 여러분의 서버에 맞는 코드로 수정해서 사용하시기 바랍니다.
ajax-example.php
<?php
if(isset($_POST['name'])){
echo 'from Server: '.$_POST['name'];
}
?>
if(isset($_POST['name'])){
echo 'from Server: '.$_POST['name'];
}
?>
실전에서는 Ajax 처리를 할때는 정확한 처리와 서버에서 오는 데이터 구조를 다루기 위해 땜방코드(--;)를 필요로 합니다. 사람들이 주로 사용하는 몇가지 포맷이 있는데(대부분 JSON or XML) Ext가 서버측 언어에 중립적인 것처럼 Ajax처리를 위해 많은 특정 언어 기반의 라이브러리가 Ext와 잘 연동됩니다.
페이지로 오는 데이터의 구조가 올바르면 서버의 어떠한 동작 방식에도 신경쓰지 않습니다.(^^) 서버측 프레임워크와 툴에 대한 부가적인 정보를 얻고 싶으면 우리의 platfrom-specific resources 목록을 살펴보시기 바랍니다.
- What's Next?
이제 Ext가 무엇이고 어떤 것을 제공하는지 맛을 살짝 보았습니다. 다음 단계로 진입하기 위해 도움이 될 많은 자료가 여러분을 기다라고 있습니다.
#Next Topic: Basic Login
