달력

92021  이전 다음

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  

--------------------------------------------------------------------------
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 + " 입니다");
  };

 });
--------------------------------------------------------------------------

방대한 기능들을 자세히 다 알려면 시간좀 걸리겠군.

Posted by Tornado tornado

댓글을 달아 주세요