본문 바로가기
Javascript/ExtJS

Tutorial:Introduction to Ext (Korean)

by windrises 2008. 1. 11.
Ext 라이브러리를 처음 사용하거나 배우고 싶은 분들에게 추천합니다. 이 튜토리얼은 Ext의 기본 개념을 잡아주고 어떻게 동적인 페이지를 작성하고 빠르게 실행시키는지를 일깨워 줄것입니다. 이 글에서는 독자들이 기본적인 자바스크립트를 접했으며 HTML 문서 객체 모델(DOM)의 기본적인 내용은 알고 있다고 가정합니다. 편의상 존칭은 생략합니다.



 다운로드 Ext

아직 Ext를 접해보지 못했다면, 우선 다운로드 부터 받아야 할 것이다. 최신 버전은 다음 위치에서 다운로드 받을수 있다. 여기 : http://extjs.com/download.

다운로드에 몇가지 선택사항이 있다. 대부분의 사람들에게는 안정 버전(stable release)이 가장 적합하다. 일단 다운로드를 했다면 압축을 풀고, examples 디렉토리 부터 살펴보기 바란다.

시작하기

예제 파일 다운로드

이제부터 자바스크립트로 할 수 있는 아주 일반적인 작업부터 시작해보겠다. 물론 Ext를 사용하여 해볼 것이다. 직접 실습하기를 좋아한다면 IntroToExt.zip 파일을 다운로드 받아서 사용해도 된다. 이 파일에는 앞으로 살펴볼 예제의 코드가 담겨 있다.

이 zip 파일에는 3개의 파일이 들어 있다: ExtStart.html, ExtStart.js 그리고 ExtStart.css. 3개 파일을 모두 Ext라이브러리가 설치되어 있는 디렉토리 아래에 압축을 풀기 바란다. (예를 들어, 만약 Ext라이브러리가 "C:\code\Ext\v1.0"에 설치되어 있다면, "v1.0" 아래에 새 폴더 "tutorial"을 만들고 압축을 푼다. "C:\code\Ext\v1.0\tutorial\"처럼). ExtStart.html 파일을 더블클릭 하면 자신의 기본 웹 브라우저가 실행되어 모든 설치가 잘 되었다는 메시지를 볼 수 있을 것이다. 만약 자바스크립트 오류가 발생한다면 그 페이지에 나타난 지침을 따라 해결하면 된다.

자 이제 각자 사용하는 IDE나 문서편집기로 ExtStart.js 파일을 열고 살펴보자: 

Ext.onReady(function() {
	alert("Congratulations!  You have Ext configured correctly!");
});

Ext.onReady 는 모든 페이지를 작성할때 거의 항상 처음으로 사용할 메소드 이다. 이 메소드는 DOM이 완전히 로딩되면 자동으로 호출된다. DOM의 로딩후에 메소드 안의 스크립트가 실행되기 때문에 페이지에 있는 어떠한 엘리먼트에 대한 참조도 실패할 위험이 없다. 다음 단계로 진행하기 위해 alert()코드가 있는 줄을 삭제한다. 이제 그 자리에 좀더 유용한 기능을 가진 진짜 같은 코딩을 해보자!

Element: Ext의 심장

자바스크립트로 하는 대부분의 일에는 페이지상의 엘리먼트에 대한 참조가 포함되어 있을 것이고 그 엘리먼트를 이용하여 여러가지 흥미로운 일을 수행하게 된다. 일반적인 자바스크립트에서 ID로 DOM 노드를 선택하는 방식은 다음과 같다: 

var myDiv = document.getElementById('myDiv');

이 방식은 그럭저럭 잘 작동한다. 하지만 리턴 되는 (DOM 노드) 객체는 강력한 기능을 제공해주지 못하는 일반 DOM 객체이다. 이 노드를 가지고 좀 더 쓸만하게 사용하려면, 여러분이 직접 작성한 추가적인 코드가 많이 필요할 것이다. 게다가 무시무시한 포스가 느껴지는 브라우저 호환성 문제라든가 하는 어려운 일들도 직접 해결해야 한다.

Ext.Element 객체를 살펴보자. 엘리먼트에 접근하고 그 엘리먼트로 이것저것 해보기 위해서 필요한 Element 객체는 Ext의 심장이라 할 수 있다. Element의 API는 전체 Ext 라이브러리의 기초가 된다. 만약 Ext에서 하나의 클래스만 배워야 한다면 선택은 바로 Element이다!

앞서 보앗던 코드에 대응하는 코드로 ID를 통해 Ext Element를 선택하는 방식은 다음과 같다 (시작 페이지인 ExtStart.html는 "myDiv"라는 id를 가지는 div를 포함하고 있기에 이 코드를 ExtStart.js에 넣으면 된다): 

Ext.onReady(function() {
	var myDiv = Ext.get('myDiv');
});

자 Element 객체로 다시 돌아가서 — 이 녀석이 뭐가 그리 대단한가?

  • Element는 우리가 필요한 모든 DOM 메소드와 속성들을 포함하는 래퍼(wrapper) 클래스이다. 추가적으로 편리하고, 단일화된 브라우저 호환성을 가지는 DOM 인터페이스를 제공한다. (래핑된 접근이 아닌 하부의 DOM 노드로 직접 접근하려면 Element.dom을 통해 접근이 가능하다)
  • Element.get() 메소드는 내부 캐싱 기능을 제공한다. 그러므로 여러번 호출을 하더라도 같은 객체를 빠르게 가져올 수 있다.
  • 브라우저 호환성 문제가 없는 Element의 메소드들을 통해서 DOM 노드에 대한 처리를 수행한다. (CSS 클래스 추가/제거, 이벤트 핸들러 추가/제거, 위치지정, 크기지정, 애니메이션, 드래그앤드랍, 등등.)

이것의 의미는 대부분의 작업에서 코드의 양이 최소화 된다는 뜻이다. 이제 간단한 예제를 살펴보자 (Element API 문서에는 이 객체의 모든 기능에 대한 완벽한 목록이 제공되고 있으므로 관심있으면 보시오). 계속해서 다음의 코드들을 ExtStart.js에 'myDiv'를 가져오는 코드 뒤에 추가하여서 실습해 보자: 

myDiv.highlight();      // The element's background will highlight to yellow then fade back
myDiv.addClass('red');  // Add a custom CSS class (defined in ExtStart.css)
myDiv.center();         // Center the element in the viewport
myDiv.setOpacity(.25);  // Make the element partially-transparent

DOM 노드 선택하기

어떤 경우에는 ID를 통해 DOM 노드를 선택하는 일이 불가능 하거나 너무 비효율적일 때가 자주 있다. ID가 설정되지 않았거나, ID를 모르는 경우 또는 같은 ID를 사용하는 엘리먼트가 너무 많은 경우 등이 있다. 가끔은 ID가 아닌 다른 무언가를 기준으로 노드를 선택하고 싶어 질때도 있다. 속성중에 하나이거나 CSS 클래스이름을 통해서 라든가... 이러한 이유로 Ext에서는 아주 강력한 기능을 가진 DOM 선택 라이브러리 인 DomQuery를 제공한다.

DomQuery는 별도의 독립 라이브러리로 사용할 수 도 있다. 하지만 대부분의 경우 Ext와 함께 사용한다. DomQuery로 적절한 엘리먼트들을 선택하고 Element 인터페이스를 통해 엘리먼트에 접근하는 방식이다. Element 객체에는 쿼리 기능이 있는 Element.select 메소드가 있는데 이 메소드는 내부적으로 DomQuery를 이용하여 엘리먼트를 선택하도록 구현되어 있다. 예제를 통해 어떻게 사용하는지 알아보자. ExtStart.html 파일에는 id가 없는 문단(<p>)태그가 몇몇 존재한다. 만약 모든 p태그에 어떠한 일을 수행하려면, 다음과 같이 한방에 해결할수 있다: 

// Highlights every paragraph
Ext.select('p').highlight();

이 예제는 Element.select의 매우 간단한 사용법을 다루었다. 실제 Element.select는 여러개의 Element를 가지며 Element 인터페이스를 사용할 수 있는 CompositeElement를 리턴한다. 이러한 방식은 Element.select의 결과로 나온 모든 Element들을 반복문 없이 각각의 Element에 메소드를 수행하는 일을 간편히 사용할 수 있게 해준다.

DomQuery는 많은 선택 옵션을 제공한다. 대부분의 W3C CSS3 DOM selector가 제공하는 옵션은 거의 포함되어 있다. 기본적인 XPath와 HTML 속성 등의 옵션도 제공한다. 이 유용한 라이브러리의 자세한 사항이 궁금하다면 DomQuery API 문서를 참고하시오.

이벤트 다루기

지금까지 살펴본 예제에서 우리가 작성한 모든 코드는 onReady 함수 안에 들어 있다. 즉 코드는 페이지가 모두 로딩된 후에 실행된다. 이런 실행 방식은 많은 제어 기능을 가지지 못한다. 어떤 액션이나 이벤트에 대응하여 코드가 실행되기를 원할 것이다. 그러기 위해서는 이벤트에 대응하는 함수를 이벤트 핸들러로 등록해야 한다.

간단한 예제로 살펴보자. ExtStart.js 파일을 열고 다음 코드를 추가한다: 

Ext.onReady(function() {
    Ext.get('myButton').on('click', function(){
        alert("You clicked the button");
    });
});

이 코드는 여전히 페이지가 로딩되고 수행되긴 하지만 중요한 차이점이 있다. 함수에 alert()가 포함되어 있지만, 바로 실행되지 않는다—이것은 버튼 클릭에 대한 "핸들러"로 등록된다. 코드의 영어 단어만 쭉 읽어도 뜻이 통한다: "Get a reference to the Element with id 'myButton' and assign a function to be called anytime someone clicks on the Element."

알다시피, Element.select를 이용하여 Element들의 그룹에 대해 같은 일을 한번에 수행할 수 있다. 예를 들어, 테스트 페이지에서 어떠한 문단(p태그)라도 클릭이 될때 메시지를 보여주고 싶다면 다음 처럼 하면 된다: 

Ext.onReady(function() {
	Ext.select('p').on('click', function() {
		alert("You clicked a paragraph");
	});
});

위의 두 예제에서 이벤트 핸들러를 함수 이름을 지정하지 않고 인라인으로 처리 했다. 이렇게 이름 없는 함수를 "익명 함수"라고 한다. 물론 익명 함수를 쓰지 않고 이름이 지정된 함수를 사용 할 수도 있다. 여러 이벤트에 재사용을 한다면 함수에 이름을 정하는 것도 좋을 것이다. 예를 들어, 다음의 코드는 앞선 예제와 동일한 기능을 가지는 다른 방식이다: 

Ext.onReady(function() {
    var paragraphClicked = function() {
      alert("You clicked a paragraph");
    }
    Ext.select('p').on('click', paragraphClicked);
});

지금까지 일반적인 이벤트 발생과 액션 수행을 살펴보았다. 하지만 어느 Element가 이벤트를 발생시켜서 액션이 수행되고 있는지 어떻게 알수 있을까? 간단하다—Element.on 메소드는 이벤트 핸들러를 등록하는데 필요한 매우 유용한 3개의 인자를 가진다(여기서는 첫번째 인자만 살펴볼 것이지만, 나머지 자세한 이벤트 핸들링 관련 내용은 API 문서에서 찾을수 있다). 지난 예제에서 핸들링 함수는 3개의 인자를 모두 무시했다. 여기서 간단한 변경을 해보자. 가장 중요한 첫번째 인자는 이벤트가 발생한 장소를 나타낸다. 이것은 브라우저 호환성 문제가 없으며 기본적인 브라우저에서 제공하는 이벤트보다 더 많은 정보를 가지는 Ext 이벤트 객체이다. 예를들어, 이벤트의 대상 DOM 노드를 알려면 다음 코드 처럼 간단히 추가하면 된다: 

Ext.onReady(function() {
	var paragraphClicked = function(e) {
		Ext.get(e.target).highlight();
	}
	Ext.select('p').on('click', paragraphClicked);
});

이벤트 대상이 되는 target은 일반 DOM 노드라는 것에 주의 하기 바란다. 그렇기 때문에 우선 그 DOM 노드에 대응하는 Element를 가져와서 어떠한 일을 수행 해야 한다. 이번 예제에서는, 문단을 하이라이트 하는 시각적 효과를 수행하였다.

위젯 사용하기

Ext는 지금까지 살펴본 코어 자바스크립트 라이브러리에 추가적으로 비교적 매우 풍부한 자바스크립트 UI 위젯들도 포함하고 있다. 이 소개글에서 모든 것을 살펴보기에는 너무 많다. 사람들이 흔히 사용하는 몇가지 위젯을 살펴보자. 얼마나 쉽게 사용할 수 있는지도 알게 될 것이다.

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 를 선언하고 클릭된 DOM 노드에 대한 Element 참조를 값으로 가지도록 하였다(여기서 변수명을 paragraph로 지정한 것은 클릭 이벤트가 항상 <p>태그를 사용하는 문단과 연결되어 있다는 것을 이미 알고 있기 때문이다). 왜 지역 변수에 저장해야 할까? 그것은 문단을 하이라이트 시키기 위해 Element에 대한 참조가 필요하며 그 Element는 메시지박스를 띄우는데 필요한 인자로 사용되기도 하기 때문이다. 대부분의 경우, 같은 결과를 리턴하는 함수를 여러번 호출하는 일은 나쁜 습관이다. 그러기에 함수 호출은 한번만 하고 지역 변수에 저장하여 재사용하기로 하자. 우린 객체지향 프로그래밍을 훌륭하게 수행하고 있다!

이제 MessageBox 호출 부분을 보자. 또 새로운 컨셉이 등장한다. 얼핏보면 이것은 단지 인자들을 나열한 일반적인 메소드 호출로 보일지도 모른다. 하지만 자세히 본다면 매우 독특한 문법이 사용 된것을 찾을 수 있을 것이다. MessageBox.show() 메소드의 인자는 하나 뿐이다: 하나의 객체 리터럴에 속성과 값이 집합 형태로 들어 있다. 자바스크립트의 객체는 중갈호 { 와 } 를 사용하여 이름/값 속성들 목록을 감싸는 것으로 언제든지 동적으로 만들 수 있다. 속성의 표현 형태는 [속성 이름] : [속성 값] 이다. 이러한 패턴은 Ext에서 널리 사용되기에 자주 볼 수 있고 금방 배워서 익숙해 질 것이다!

왜 객체 리터럴을 사용하는 것인가? 주된 이유는 유연성이다. 객체 리터럴을 사용하면 메소드 시그니처(인자의 개수와 타입)를 변경하지 않으면서 새로운 속성을 추가하거나 제거하는 일이 매우 쉽고 속성들 간의 순서를 생각할 필요도 없다. 또한 개발자의 관점에서 (MessageBox.show의 경우처럼) 많은 옵션 인자를 가지는 메소드를 사용할때 더욱 편리함을 준다. 가상의 메소드 foo.action 을 예를 들어 보겠다. foo.action은 4개의 인자를 가지고 있지만 지금은 마지막 1개만 설정해서 사용할 것이다. 이런 경우, 코드를 다음 처럼 작성할 것이다: foo.action(null, null, null, 'hello'). 하지만 이 메소드에서 객체 리터럴을 사용한다면, 코드를 다음 처음 작성할 것이다: foo.action({ param4: 'hello' }). 사용하기 더 쉽고 코드 가독성도 더 높다.

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',71.72,0.02,0.03,'10/1 12:00am'],
		['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
		['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
	];
 
	var ds = new Ext.data.Store({
		proxy: new Ext.data.MemoryProxy(myData),
		reader: new Ext.data.ArrayReader({id: 0}, [
			{name: 'company'},
			{name: 'price', type: 'float'},
			{name: 'change', type: 'float'},
			{name: 'pctChange', type: 'float'},
			{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
		])
	});
	ds.load();
 
	var colModel = new Ext.grid.ColumnModel([
		{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'}
	]);
 
	var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
	grid.render();
	grid.getSelectionModel().selectFirstRow();
	Ext.get('grid-example').show();
});

이건 매우 길어 보이지만 실제로 코드는 오직 7줄 뿐이다!

  • 첫째 줄은 그리드에 표시될 데이터 배열을 만든다. 실제 프로젝트에서라면 데이터베이스나 웹서비스 처럼 동적인 환경에서 부터 데이터를 가져오게 될 것이다.
  • 다음, 데이터 스토어를 만들고 로드한다. 데이터 스토어는 하부의 Ext 라이브러리에게 데이터를 어떻게 읽어가야 하는지 알려주는 역할을 한다.
  • 다음, 컬럼(열) 모델을 정의한다. 컬럼 모델은 그리드의 각 열을 어떻게 설정할 것인지 나타낸다.
  • 마지막으로, 데이터 스토어와 컬럼 모델을 인자로 받아 그리드 위젯을 만든다. 렌더링하고 1행을 선택하도록 한다.
  • 마지막 줄은 그리드 위젯을 사용하는데 필요한 내용은 아니다. 단지 ExtStart.html 파일에 있는 <div> 엘리먼트를 화면에 보이도록 설정한다. 왜냐면 이전에 스타일에 hidden 으로 화면에 보이지 않게 해두었기 때문이다. (토론.)


얼마나 쉬운가? 오타 없이 잘 타이핑 했다면, 아래와 비슷한 화면이 나올 것이다:

Image:IntroToExt_grid.gif

물론, 위 코드에서 이 글만으로는 다 이해하지 못하고 넘어가는 부분도 있을 것이다(당췌 MemoryProxy는 머하는 놈이야? 같은 불평). 이 예제의 목적은 보기에 멋지지만 실제로는 복잡한 UI 컴포넌트를 단지 몇줄 안되는 매우 짧은 코드로 만들어 낼수 있다는 것을 보여주고자 함이다. 더 상세한 내용에 대한 학습은 독자들에게 숙제로 남긴다. 홈페이지에는 그리드에 대해 더 알아 볼수 있는 내용의 글이 많이 있다. 어떻게 작동하는 만저 볼수 있는 그리드 데모와 그리드 API 문서도 제공하고 있다.

더 알아보기...

우리가 여기서 살펴본 내용은 빙산의 일각에 불가하다. Ext에는 수십개의 UI위젯이 있다. 자동 페이지 레이아웃, 탭, 메뉴, 툴바, 다이얼로그, 트리 뷰 등등... API문서의 examples 부분을 열어서 한번씩 살펴보면 좋을 것이다.

Ajax 통신하기

페이지를 만들었고 자바스크립트로 상호작용하는 방법을 알았다. 이제 슬슬 원격 서버(서버의 데이터베이스)로 부터 데이터를 가져오거나 보내는 방법이 궁금할 테다. 이런 일을 페이지 리로딩이 없는 비동기 방식으로 자바스크립트로 처리하는 방식을 Ajax라고 한다. Ext는 Ajax를 매우 훌륭하게 지원한다. 예를들어 목표는 사용자 행동(클릭 등)을 인식하여 서버와 비동기 방식 통신을 통해 결과로 엘리먼트를 갱신하여 사용자에게 알려 주는 것이다. 간단한 예제로 텍스트 입력 상자 하나와 버튼 하나 그리고 응답 메시지를 표시할 div 하나를 가지는 HTML 폼을 작성하자. (주의: 이 코드를 ExtStart.html 파일에 추가 해도 좋다. 하지만, 서버측 코드를 실행해서 통신하기 위해서는 반드시 이 파일을 웹 서버에 올리고 접속해야 한다.): 

<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="okButton" value="OK" />

다음으로, 서버와 통신하기 위한 자바스크립트를 작성한다(ExtStart.js 파일을 적절히 수정):: 

Ext.onReady(function(){
	Ext.get('okButton').on('click', function(){
		var msg = Ext.get('msg');
		msg.load({
			url: [server url], // <-- replace with your url
			params: 'name=' + Ext.get('name').dom.value,
			text: 'Updating...'
		});
		msg.show();
	});
});

(주의: 이 예제를 실행해 보려면 반드시 웹서버로 요청을 보내야 한다. 즉 URL주소가 http:// 로 시작해야지 file:// 로 시작하면 안된다.)

이제 이런 일반적인 패턴은 이미 다들 파악 될이다! 이 코드는 okButton을 Element 객체로 래핑하고 버튼을 클릭하는 이벤트를 핸들링하는 익명 함수를 이벤트 핸들러로 등록하고 있다. 클릭 핸들러는 내부적으로 Ext에 내장된 특수한 클래스인 UpdateManager를 사용한다. UpdateManager는 Ajax 요청을 보내고 응답을 받아서 지정한 Element를 갱신한다. UpdateManager를 직접적으로 사용할 수도 있지만 여기서 한것처럼 갱신하고자 하는 (여기서는 'msg' div) Element를 통해 Element.load 메소드로 접근할 수 있다. Element.load 메소드가 사용되면, 서버의 응답은 자동으로 그 Element의 innerHTML로 대체된다. 여기서는 간단히 요청을 처리할 서버측 프로세스 url, 처리할 쿼리문자열 인자(여기서는 'name' 필드로 전달) 그리고 Element의 innerHTML로 표시될 초기 텍스트를 인자로 사용했다. 초기에 hidden 설정으로 시작한 msg div를 화면에 표시(Show)하면 끝이다. 물론, Ext의 대부분의 클래스가 그렇듯이 UpdateManager에도 더 많은 옵션이 지원된다. 옵션을 사용하면 Ajax 요청을 처리하는 다른 방법도 잘 지원한다. 이번 예제에서는 간단한 사용법만 보여준것 뿐이다.

남은 Ajax 퍼즐의 마지막 부분은 웹서버에서 요청을 받아서 처리하고 응답을 리턴하는 서버측 처리 부분이다. 이 처리 부분은 서버 페이지, 서블릿, HTTP 핸들러, 웹서비스, 또는 펄이나 CGI 스크립트 아무것이나 사용할 수 있다 — 웹서버에서 HTTP 요청을 처리할 수 있다면 어떠한 종류라도 상관 없다. 너무 다양하기 때문에 모든 표준적인 예제를 보여주기가 어렵다. 그래서 일반적으로 주로 사용하는 언어에 대해 약간의 예제를 준비했다. (이 코드는 단순히 'name' 필드로 무엇이 오든간에 'From Server: '에 name필드 값을 붙여서 응답하도록 한다. 응답은 'msg' div에 나타날 것이다):

PHP

<?php if(isset($_POST['name'])) {
		echo 'From Server: '.$_POST['name'];
	}
?>

Perl

#!/usr/bin/perl
use strict;
use warnings;
use CGI;
 
my $Query = new CGI;
 
print $Query->header();
print "Hello from : ".$Query->param('name');
 
exit;

ASP.Net

protected void Page_Load(object sender, EventArgs e)
{
	if (Request.Form["name"] != null)
	{
		Response.Write("From Server: " + Request.Form["name"]);
		Response.End();
	}
}

ColdFusion

<cfif StructKeyExists(form, "name")>
    <cfoutput>From Server: #form.name#</cfoutput>
</cfif>

JSP

From Server: ${param.name}


실전에서의 Ajax 처리상 문제는 올바른 응답 처리와 서버에서 보내는 구조화된 자료 형태를 다루기 위해서 추가적인 코드가 필요하다는 것이다. 사람들이 일반적으로 주로 사용하는 데이터 형태로는 JSON 또는 XML이 있다. Ext는 특정 언어별로 종속적으로 사용하는 Ajax 처리 라이브러리와도 궁합이 잘 맞다. 왜냐면 Ext는 서버측 언어에 중립적이기 때문이다. 페이지로 돌아오는 결과가 올바른 자료 형태이기만 하면, Ext는 서버에서의 처리 방식은 전혀 관여하지 않는다!

끝인가?

이제 겨우 Ext가 무엇이고 어떤일을 할수 있도록 하는지 조금 맞본 당신, 아래의 링크에서 더 높은 수준의 내용을 맞볼수 있을 것이다:

Retrieved from "http://extjs.com/learn/Tutorial:Introduction_to_Ext_%28Korean%29"

'Javascript > ExtJS' 카테고리의 다른 글

Tabs,Layout 테스트  (1) 2008.01.02
ajax ExtJS library  (0) 2008.01.02

관련글

티스토리툴바