EXT 빠른 시작(Playing With Ext The Easy Way)

Summary: Playing With Ext The Easy Way (Chinese)
Author: Patrick Donelan(번역: Cloudream
Published: 2007-10-12
Ext Version: 2.0
Languages: English Deutsch Chinese Korean Japanese

Contents

[ hide ]
비틀거리다
1.1 첫 번째 단계 - 시작
1.2 2단계 - 시작

2 우도소시
if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); }

비틀거리며 걸음마를 배우다

첫 번째 단계 - 시작

Ext, 조회 온라인 데모, 읽기 API 문서 를 이미 들어보셨을 것입니다.그러나 복잡한 API 문서에 대해 어떻게 손을 대지 않으십니까?!

2단계 - 시작

통람API 문서하고 즉시 시도해야 할 기능을 찾았습니다. 혼잡한 웹 소스 코드에 직면하여 어떻게 간단한 테스트 페이지를 시작합니까?그럼...
목표가 무엇이든지 본문에 따라 Ext를 빠르게 사용할 수 있습니다.아니오, 서버를 구축하지 않아도 됩니다. 필요한 것은 단지 Firefox 브라우저 및 Firebug 디버그 플러그인 뿐입니다.만약 아직 설치되지 않았다면, 지금이 좋은 기회이다.

우도소시

열기Ext API 문서, 당신은 이미 출발했습니다!

F12를 클릭하여 Firebug 콘솔을 엽니다.

Firebug 컨트롤러가 단일 모드 ('>>>'로 시작) 에 있으면 오른쪽 아래에 있는 빨간색 위쪽 화살표를 눌러서 여러 줄 편집 모드를 엽니다.

다음 코드를 입력하고 Ctrl-Enter 키를 눌러 실행합니다.

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

위의 코드는 현재 DOM body 요소를 하나의 ID로 test의 div 요소로 대체하는 역할을 합니다.방금 그 API 문서들은 삭제되었지만 Ext 코드는 여전히 적용되고 수시로 당신을 위해 노력합니다.
현재, 우리는 당신이 패널 요소(Panel)를 간단하게 추가하기를 원한다고 가정하지만, Ext.Panel의 API에 대한 번거로운 설명은 무력합니다.그러면 이 코드를 Firebug 콘솔에 추가해 보십시오.

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를 다시 클릭합니다.어이!패널 요소가 생성되었습니다.
좋아요. 그런데 옵션을 좀 수정하면요?아까 코드를 다음 코드로 대체합니다.

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 를 클릭합니다.어때, 신축할 수 있는 판넬이 하나 배치됐어.(패널의 오른쪽 위 모서리에 있는 작은 아이콘 참고)
Ctrl-Enter를 두드릴 때마다 첫 번째 줄의 코드가 기존 내용을 제거합니다. 그러면 깨끗한 디버깅 환경을 만들 수 있습니다.이것은 간단한 팁입니다. 여러 가지 설정 옵션을 시도하는 데 매우 편리합니다.
업데이트 () 함수에 필요한 HTML 코드를 얼마든지 추가할 수 있습니다.그리고 Ext API를 탐색하기 위해 많거나 적은 Javascript를 작성합니다.
뭘 더 기다려?지금 바로 Ext Api를 직접 실천하세요.

Ext Programmer's API Documentation

Ext User Forums

Retrieved from "
http://extjs.com/learn/Tutorial:Playing_With_Ext_The_Easy_Way_%28Chinese%29 "