--------------------------------------------------------------------------
ext-prototype-adapter 을 이용하여 prototype, Scriptaculous 사용하기
--------------------------------------------------------------------------
자세한 내용은 http://extjs.com/ 와 다운로드 받은 Examples 에서 봐야함
오늘은 맛보기만 ㅎㅎㅎㅎㅎ
--------------------------------------------------------------------------
테스트할 디렉토리 구조.
기본 테스트 디렉토리 ==> d:\html\ext_test
JS 파일 디렉토리 ==> d:\html\ext_test\common\js
CSS 파일 디렉토리 ==> d:\html\ext_test\common\css
EXT-JS 이미지 디렉토리 ==> d:\html\ext_test\common\images ,
d:\html\ext_test\common\raw_images
1. http://script.aculo.us/downloads 에서 스크립타큘로스를 다운로드 받는다.(1.7 버전 이상)
압축을 풀면 아래와 같은 디렉토리 구조가 보인다.
----- lib
|-- src
|-- test
lib 디렉토리에 있는 prototype.js 를 JS 파일 디렉토리에 복사한다.
src 에 있는 파일중 unittest.jsp 를 제외하고 JS 파일 디렉토리에 복사한다.
2. http://extjs.com/download 에서 ext-js 를 다운로드 받는다.
압축을 풀면 디렉토리가 여러개 있고 js 파일들도 보이는데 스크립타큘로스와 프로토타입을
사용할 것이기 때문에 필요한것만 복사한다.
ext-prototype-adapter.js
ext-all.js
위의 두 파일을 JS 파일 디렉토리에 복사한다.
다음으로 resource 디렉토리에 있는 images 와 raw-images 디렉토리를 common 디렉토리에 복사한다.
3. 첫번째 예제 작성
기본 테스트 디렉토리(d:/html/ext_test) 에 beginner_1.html 로 파일을 하나 만든다.
----- beginner_1.html -----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="./common/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./common/css/ytheme-aero.css">
<style type="text/css">
body {
font-family: Tahoma,Arial,Helvetica,sans-serif;
font-size:12px;
color:#333;
padding: 20px;
}
</style>
<script type="text/javascript" src="./common/js/prototype.js"></script>
<script type="text/javascript" src="./common/js/scriptaculous.js"></script>
<script type="text/javascript" src="./common/js/ext-prototype-adapter.js"></script>
<script type="text/javascript" src="./common/js/ext-all.js"></script>
<script type="text/javascript" language="javascript">
<!--
Ext.onReady(function() {
alert("테스트 합니다");
});
//-->
</script>
</head>
<body>
<input type="button" id="myButton" value="My Button" />
</body>
</html>
--------------------------------------------------------------------------
위의 내용을 실행 했을 경우 ALERT 창이 뜨면 된것이다.
간단하게 버튼하나 만들어봅시다.
/*---- 수정된 EXT.onReady() 시작 -----*/
/*---- EXT.onReady() 안의 내용을 아래와 같이 수정 ---- */
Ext.onReady(function() {
var paragraphClicked = function(e) {
var paragraph = Ext.get(e.target);
//paragraph.highlight();
Ext.MessageBox.show({
title: '!!! 타이틀 !!!',
msg: '메세지 박스 입니다...',
width:800,
buttons: Ext.MessageBox.OKCANCEL,
animEl: paragraph
});
}
Ext.get('myButton').on('click', paragraphClicked);
});
/*---- 수정된 EXT.onReady() 끝 -----*/
실행하면 ok / cancel 버튼이 있는 메세지 박스가 뜰것이다.
만약 클릭한 버튼이 어떤건지 알아내기 위해서는 아래와 같이 콜백함수를 지정하면 된다.
--------------------------------------------------------------------------
Ext.onReady(function() {
var paragraphClicked = function(e) {
var paragraph = Ext.get(e.target);
//paragraph.highlight();
Ext.MessageBox.show({
title: '!!! 타이틀 !!!',
msg: '메세지 박스 입니다...',
width:800,
buttons: Ext.MessageBox.OKCANCEL,
animEl: paragraph,
fn : showResult
});
}
Ext.get('myButton').on('click', paragraphClicked);
function showResult(btn){
alert("눌러진 버튼은 " + btn + " 입니다");
};
});
--------------------------------------------------------------------------
방대한 기능들을 자세히 다 알려면 시간좀 걸리겠군.
'DHTML > Javascript' 카테고리의 다른 글
| JavaScript Throw Statement (0) | 2007.08.21 |
|---|---|
| scriptaculous 응용한 accordion 메뉴... (0) | 2007.06.20 |
| 새로산 책 ==> Ajax prototype.js: 프로토타입 완전분석 (0) | 2007.04.03 |
| [scriptaculous] 메인 화면에 사용하면 좋을듯한 스크립트. (1) | 2007.03.16 |
| [javascript]URL Encoding/Decoding (0) | 2006.10.31 |