ExtJS Tutorial

초보자

Ext를 알고있고, 온라인 샘플들을 보았으며, 심지어 API문서를 보기 시작했다면 Ext를 쓰기 위해 근질근질 할것이다. 그런데 가지고 놀 테스트 서버가 없다.

시나리오 2 - 프로

이미 API문서 를 파고 있고 지금 당장 사용할 메쏘드를 찾아보는걸 좋아한다. 그러나 하나의 메쏘드로 테스트하기 위해 적당한 리소스를 포함한 테스트 HTML 페이지를 만들기를 좋아한다.

이러한 이유로 이 문서에서 당장 Ext를 사용할수 있는 방법을 제시한다. 먼저 파이어폭스Firefox with Firebug installed를 설치할 필요가 있다. 파이어버그 플러그인을 설치하도록 하낟. 디버깅 툴이 있는 다른 브라우저라도 상관이 없다.

시작하기

• Ext API 문서를 많이 참조하라 . 기회는 언제나 당신곁에 있다.
• F12키를 눌러 Firebug console을 열어라 (Firebug를 바로 실행했는가?)
• 만일 파이어버그 콘솔이 '>>>'와 같이 한줄이 되어 있다면 오른쪽 하단의 빨간색 화살표를 클릭하여 멀티라인 버전으로 바꿔라 (자바스크립트 콘솔처럼 쓸수있다.)
• 첫번째 라인에 아래와 같이 입력하고 Ctrl-Enter로 실행시켜라:

Ext.get(document.body).update('<div id="test"></div>');

위의 코드가 뜨하는 것은 DOM Body에 id가 test인 div 엘리먼트를 생성시킨다. body의 내용이 사라졌다. 그러나 Ext Library가 로드되어 있고 가지고 놀 준비가 되어있다. (HTML페이지에 Extjs 스크립트가 포함되어 있어야 한다. 그렇지 않다면 Ext is not defined 라는 에러를 볼것이다.)

이제 Ext.Panel API를 이용하여 새로운 Panel 객체를 만들어 보자. 아래 코드를 파이어 버그 콘솔에 추가한다:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content'
});

Ctrl-Enter로 다시 실행하면(아래 Run을 클릭해도 된다.) 화면에 새로운 패널이 생긴걸 확인할수 있다.

그럼 여기에 Collapsible 을 가능하게 하기 위해 다른 옵션을 추가여 어떤 현상이 벌어지는지 확인하자. 파이어버그에서 아래 라인에 새로운 configuration 옵션을 추가한다.

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content',
	collapsible: true
});

다시 실행시키면 패널의 오른쪽 부분에 토글아이콘이 나타난것을 확인할수 있다.

매번 Ctrl-Enter를 치면서 옵션들을 추가, 삭제 하면서 작업을 해라. 과도한 configuration 옵션들은 별로 좋지 않다.(원문과는 좀 다른 느낌인데.. ) 첫번째 라인의 update()메쏘드를 이용하여 표현하고 하는 많은 HTML를 추가할수 있다.

자 그럼 아래 API 문서를 이용해 스스로 해보자!

• Ext Programmer's API Documentation
• Ext User Forums

(번역이 매끄럽지 못하고 중간중간 생략된 부분이 있으므로 다음분이 더 자세히 설명해 주실것입니다. - 김동완)