From Learn About the Ext JavaScript Library

본 튜토리얼은 Ext 버전 2.0 입니다. 1.x 버전 튜토리얼은 아직 존재합니다.

Ext 라이브러리를 처음으로 사용하려고 하거나 배우려고 한다면 이곳을 잘 찾아 오신겁니다. 본 튜토리얼에서는 Ext의 기본적인 개념과 손쉽게 동적인 페이지를 만들고 실행하는 방법을 설명합니다. 본 문서는 독자가 자바스크립트와 HTML Document object model(DOM)에 대해서 기초적인 지식을 가지고 있다는 가정 하에 설명을 진행합니다.

Ext 다운로드하기

아직 다운로드를 하지 않았다면 먼저 가장 최신의 Ext 배포본을 다음의 주소에서 다운로드 받습니다: http://extjs.com/download.

여러 가지 버전이 있지만 가장 최신의 안정화 버전을 다운로드 하는 것을 추천합니다.(2.0 정식 판이 출시되기 전까지는 개발버전을 사용하세요 1.1.1 버전을 사용하시면 안됩니다.) 다운로드가 완료되면 압축을 풀고 examples 같은 사용하기에 적당한 디렉터리로 시작하세요.

시작하기

예제 파일 다운로드 IntroToExt2.zip

이제 Ext 상에서 일반적인 자바스크립트를 작성하고 실행 시키는 과정을 살펴보도록 합시다. 만약 직접 실습을 해보고 싶다면 스타터 파일을 IntroToExt2.zip 에서 다운로드 해서 Ext code로 페이지를 작성해보세요.

압축파일은 4개의 파일을 담고 있습니다: ExtStart.html, ExtStart.js, ExtStart.css 그리고 ajax-example.php.

ExtStart.html, ExtStart.js, ExtStart.css 이며 설치된 Ext 디렉터리 하위에 압축을 풉니다. (만약 Ext가 "C:\code\Ext\v1.0" 에 설치 되어 있으면 "C:\code\Ext\v1.0\tutorial\" 와 같이 하위디렉터리를 구성합니다.)

• Ext가 설치된 폴더 바로 하위의 폴더에 압축을 풀어서 놓으세요.(예를 들어 Ext가 "C:\code\ext-2.0\," 에 위치해 있으면 "ext-2.0\" 밑에 "tutorial" 라는 이름으로 새로운 폴더를 만들고
• ExtStart.html 을 더블클릭 하면 기본 브라우저로 열리게 되는데, 모든 설정이 제대로 되었다면 메시지를 볼 수 있습니다. 만약 자바스크립트 에러가 발생하면 다시 한번 설치 과정을 점검합니다.

ExtStart.js 파일을 여러분이 즐겨 쓰는 IDE 혹은 text 편집기에서 열어보면 다음과 같이 보일 겁니다:

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

Ext.onReady는 반드시 가장 처음으로 호출되는 메소드입니다. 모든 DOM의 로딩이 완료되어야 이 메소드가 자동으로 호출 되므로 이 메소드 내부의 코드는 페이지 내 모든 엘리먼트에 접근이 가능합니다. 이제 기존에 있던 alert() 라인을 삭제하고 대신 좀더 쓸만한 코드를 넣어 봅시다!

Element: Ext의 심장

자바스크립트로 페이지 내 엘리먼트들을 제어 하려면 위해서 각각 해당 엘리먼트를 식별하기 위한 참조가 필요하게 되는데 아래의 코드처럼 전통적인 자바스크립트에서는 ID를 이용하여 DOM 노드를 선택하게 됩니다:

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

이 코드는 잘 실행되긴 하지만 여기서 반환 되는 객체는(DOM 노드) 쓰기 쉽지도 않고 기능이 강력하지 않습니다. 반환된 node를 유용하게 사용하려면 많은 추가 코드를 작성해야 합니다. 게다가 브라우저 별 호환성에 대해서도 고려를 해야 하므로 짜증 만땅이라 할 수 있지요.

이제 Ext.Element 객체를 살펴봅시다. 정말 Ext의 심장과도 같은 이 객체는 엘리먼트에 접근하거나 기능을 실행하려고 할 때 필요합니다. Element API는 Ext 라이브러리에 입문하려고 할 때 기초가 되며 여러분이 Ext에서 오직 하나의 클래스만 배울 시간만 가지고 있다면 Element를 선택하세요!

앞의 예제 코드에 대응되는 Ext Element로 ID를 얻어내는 코드는 아래와 같습니다. (스타터 페이지에 포함된 ExtStart.htm에 id가 "myDiv,"인 div객체가 이미 있으니 그냥 아래의 코드를 ExtStart.js에만 추가 시키면 됩니다.):

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

이제 Element 객체로 다시 돌아가서—왜 흥미를 가져야 할까요?

• Element 클래스는 대부분의 기존 DOM 메소드와 프로퍼티를 포함하고 있는데, 이로 인해 편리성, 통합성, 브라우저간 호환성이 있는 DOM 인터페이스를 얻게 됩니다(필요에 따라 Element.dom 을 통하여 여전히 기본 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 노드들 선택하기

종종 DOM 노드를 ID로 선택하는 게 불가능 하거나 비효율적일 경우가 있습니다. 엘리먼트에 ID가 설정되어 있지 않거나 설정된 ID를 모를 때, 혹은 ID로 참조할 요소가 너무 많을 경우에는 여러분은 엘리먼트에 설정된 어떤 프로퍼티값이나 설정된 CSS 클래스 명으로 선택한다던가 하는 먼가 다른 방법이 필요 할겁니다. 이런 경우를 위해서 Ext에서는 DomQuery라고 불리는 극악 강력한 DOM 선택 라이브러리를 제공 합니다.

DomQuery는 독립 라이브러리로 사용될 수도 있지만 Ext에서 Element 인터페이스를 이용하여 엘리먼트를 사용하고자 할 때 해당 엘리먼트를 선택하는 부분에서 자주 사용됩니다. 운 좋게도 Element 객체는 Element.select라는 메소드로 엘리먼트를 쿼리 할 때 DomQuery를 제공합니다. 예제를 보면서 어떻게 사용해야 하는지 살펴 봅시다. ExtStart.html 파일은 ID가 없는 몇 개의 문단(<p>) 태그를 가지고 있습니다, 한번에 모든 단락을 선택하고 기능을 실행시키려면 아래와 같이 코드를 작성합니다:

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

예제는 Element.select를 아주 손쉽게 사용하는 방법을 보여줍니다. 여기서 반환되는 객체는 CompositeElement로 Element 인터페이스를 통하여 내부 엘리먼트에 접근할 수 있게 해줍니다. 이것은 반복 문(looping)과 개별접근이 없이 Element.select로 손쉽게 모든 엘리먼트의 인스턴스를 리턴 받을 수 있게 해줍니다.

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()이 선언되어 있는데 즉시 실행 되지 않습니다-이 부분은 버튼의 클릭이벤트에 대한 "핸들러"로 지정되어 있기 때문입니다. 말로 표현하자면 이 코드는 다음과 같이 읽을 수 있겠습니다: "id가 'myButton'인 엘리먼트의 참조를 구한 다음 누군가 해당 엘리먼트를 클릭할 때 함수가 호출되게 지정을 한다."

놀라지 마세요. Element.select는 같은 기능을 제공하지만 한번에 모든 요소 그룹을 가져 올 수 있습니다. 예를 들어, 우리의 테스트 페이지 내에 모든 문단을 클릭 했을 때 메시지를 보여주려면 다음과 해봅시다:

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

여기 두 개의 예제 내에서 이벤트 처리 함수는 함수 명이 없이 단순히 인라인으로 선언되어 있습니다. 이러한 종류를 함수를 "익명 함수(anonymous function)"라고 하는데 물론 이름이 있는 함수도 이벤트 처리용으로 할당 할 수 있습니다. 아래의 예제 코드는 앞서의 예제와 동일한 기능을 수행합니다:

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

여기까지 우리는 이벤트가 발생되었을 때 일반적인 처리를 하는 방법을 살펴 보았습니다, 하지만 이벤트가 발생한 엘리먼트자체에 어떤 액션을 실행하려고 할 때 해당 엘리먼트를 어떻게 알아 낼 수 있을 까요? 물론 간단히 찾아 낼 수 있습니다-Element.on 메소드는 이벤트 핸들링 함수에 3개의 완전 유용한 파라메터를 전달합니다.(여기에서는 첫 번째 1개만 살펴 봅니다 나머지는 API 문서를 참고하세요.) 앞서 예제에서는 핸들링 함수에 파라메터가 생략되어 있습니다, 하지만 조금만 바꿔서 부가적인 기능을 추가 시킬 수 있습니다. 첫 번째(그리고 가장 중요한) 파라메터는 발생된 이벤트 입니다. 이것은 사실 Ext 이벤트 객체인데, 표준 브라우저 이벤트 보다 브라우저간 호환성이 있고 더욱 많은 정보를 제공합니다. 예를 들어, 아래처럼 간단한 코드 추가만으로 이벤트의 target으로 설정된 DOM 노드를 구할 수 있습니다:

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

target이 DOM 노드라는 것을 기억하세요. 이제 이벤트가 발생된 엘리먼트를 구해서 원하는 액션을 수행할 수 있게 되었습니다. 예제를 실행해보면 모든 문단에 하이라이트가 되는 것을 볼 수 있습니다.

위젯 사용하기

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 노드 의 엘리먼트 참조를 가지고 있게 했습니다.(이번에는 오직 <p> 태그들만 클릭이벤트와 연계되므로 항상 입력되는 것을 알 수 있습니다.). 왜 이렇게 해야 할까요? 우리는 하이라이트 시키기 위한 엘리먼트의 참조가 필요하며 메시지박스를 위한 인자로 동일한 엘리먼트를 필요하기도 합니다. 일반적으로 동일한 값 또는 객체 참조를 얻기 위해 동일한 함수를 여러 번 호출하는 것은 나쁜 습관이므로 지역 변수에 할당하여 재사용합니다. 이렇게 하면 우린 착한 객체지향 개발자가 되는 겁니다!

이제 메시지박스 호출 부분을 살펴봅시다. 또 다른 새로운 컨셉트가 보이는데 단순히 메소드에 인자 리스트를 전달하는 것처럼 보이지만 자세히 살펴 보면 매우 특이한 문법이 보일 겁니다. 사실 MessageBox.show()에는 오직 하나의 인자만 전달 되고 있는데:프로퍼티와 값의 집합을 담고 있는 객체 리터럴입니다. 자바스크립트에서 객체 리터럴은 이름/값 프로퍼티 리스트를 { 와 } 로 감싸서 언제든지 동적으로 생성시킬 수 있습니다. 형식은 [프로퍼티 이름] : [프로퍼티 값] 으로 표기 하며 이 패턴은 Ext 곳곳에서 널리 사용되기 때문에 금방 익숙해질겁니다.

왜 객체 리터럴을 사용하냐고요? 가장 큰 이유는 유연성입니다. 객체 리터럴을 사용하면 아무때나 프로퍼티가 추가/삭제 되거나 순서가 변경되더라도 메소드의 시그니쳐(인자의 개수와 타입)를 변경하지 않아도 됩니다. 또 개발자의 관점에서 옵션 인자가 많은 메소드를 사용할 때 편리함을 제공합니다.(MessageBox.show 경우 처럼) 예를 들어 foo.action 이라는 가상의 메소드가 있다고 하고 네개의 옵션 인자가 있다고 합니다. 그런데 오직 하나만 전달하는 상황이라면. 코드를 다음과 같이 작성해야 겠지요: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 myReader = new Ext.data.ArrayReader({}, [
		{name: 'company'},
		{name: 'price', type: 'float'},
		{name: 'change', type: 'float'},
		{name: 'pctChange', type: 'float'},
		{name: 'lastChange', type: 'date', dateFormat: '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라인의 코드 뿐입니다(테스트 데이터를 제외하면 3라인)!

• 첫 라인은 그리드에 보여줄 테스트 데이터를 생성하고 있습니다. 실제 프로젝트에서는 이 부분에서 데이터 베이스나 웹서비스 같은 동적인 소스에서 데이터를 가져 오겠지요.
• 다음으로 데이터 리더를 생성하였는데 그리드내 데이터 스토어에 담기 위해 데이터를 어떻게 읽어 들이고 레코드로 변환할지 설정합니다. 다양한 데이터 타입을 위한 각각의 리더 클래스가 있습니다.
• 다음으로 그리드 위젯을 생성하는데 아래와 같은 설정 값들을 전달합니다.
  • 새로운 데이터 스토어, 생성한 테스트 데이터와 리더가 설정 되어 있습니다.
  • columns 에 컬럼 모델 정의를 합니다.
  • 추가옵션으로 그리드의 기능 설정을 할 수 있습니다.
• 마지막으로 SelectionModel을 사용해 첫 번째 행을 하이라이트 시킵니다.

무척 간단하지요? 잘되었다면 아래와 같이 보일 겁니다:

물론 이런 코드를 가지고 자세한 부분까지 이해할 수는 없습니다. 이 예제의 목적은 풍부하고 시각적으로 복잡한 사용자 인터페이스 컴포넌트를 최소한의 코드만으로 작성할 수 있다는 것을 보여주는데 있습니다—자세한 내용은 독자들의 숙제로 남깁니다. 그리드를 배우는데 도움이 되는 많은 내용들이 interactive grid demos 와 GridPanel API documentation 에 포함되어 있습니다.

그리고 다른 것들...

지금 우리가 살펴본 것은 빙산의 일각에 불가합니다. 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>

다음으로, 서버에 데이터를 주고 받기 위한 자바스크립트를 추가 합니다(ExtStart.js를 아래와 같이 수정):

Ext.onReady(function(){
	Ext.get('okButton').on('click', function(){
		var msg = Ext.get('msg');
		msg.load({
			url: 'ajax-example.php', // <-- change if necessary
			params: 'name=' + Ext.get('name').dom.value,
			text: 'Updating...'
		});
		msg.show();
	});
});

주의: 본 예제는 오직 웹서버상에서만 실행됩니다. 브라우져의 URL이 http:// 가 아니거나 file:// 이면 Ajax 처리가 실행 되지 않습니다. Localhost로도 작동은 잘될 겁니다 하지만 반드시 http를 사용 해야 합니다.

아마도 일반적인 패턴은 지금과 비슷하게 시작할겁니다! 이 코드는 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' 로 다운로드를 제공하고 있지만 여러분의 서버에 맞는 코드로 수정해서 사용하시기 바랍니다:

Plain PHP

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

CakePHP

<?php if(isset($this->data['name'])) {
		$this->flash('From Server: '.$this->data['name']);
	}
?>

Django

from django.http import HttpResponse
 
def ajax_request(request):
    return HttpResponse('From Server: %s' % request.POST.get('name', 'nada'))

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와 잘 연동 됩니다. 페이지로 오는 데이터의 구조가 올바르면 서버의 어떠한 동작 방식에도 신경 쓰지 않습니다! 서버 측 프레임워크와 툴에 대한 부가적인 정보를 얻고 싶으면 우리의 platform-specific resources 목록을 살펴 보시기 바랍니다.

다음으로 볼 것은?

이제 Ext가 무엇이고 어떤 것을 제공하는지 맛을 살짝 맛보았습니다. 다음 단계로 진입하기 위해 도움이 될 많은 자료가 여러분을 기다리고 있습니다:

• Additional Tutorials
• Interactive Examples
• Ext Programmer's API Documentation
• Ext User Forums