ÇÁ·Î±×·¡¹Ö
extJs ÃÊ °£´Ü »ùÇÃ
±Û¾´ÀÌ : °ü¸®ÀÚ ³¯Â¥ : 2010-04-22 (¸ñ) 16:56 Á¶È¸ : 3127
Âü°í »çÀÌÆ®  : http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html

¿ì¼± °³¹ßÀ» Çϱ⿡ ¾Õ¼­ µð·ºÅ丮±¸Á¶¸¦ ´ÙÀ½°ú °°ÀÌ ³õ°í °³¹ßÀ» Çϵµ·Ï ÇÏÀÚ.

¾ÕÀ¸·Î ¸ðµç ¼Ò½º´Â ksloveeÆú´õ ÇÏ´Ü¿¡ ³Öµµ·Ï ÇÒ°ÍÀÌ´Ù.



1. °¡Àå ±âº»ÀûÀÎ alertâ ¶ç¿ì±â
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all-debug.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
 Ext.Msg.alert('Hello','World');
});
</script>
</HEAD>

<BODY>
</BODY>
</HTML>

¿©±â¼­ °¡Àå Áß¿äÇÑ °ÍÀº... ¸ðµç ÆäÀÌÁö´Â Ç×»ó ext-all.css, ext-base.js, ext-all-debug.js ÆÄÀÏÀ» ±âº»ÀûÀ¸·Î °¡Áö°í °³¹ßÀ» Çؾß

ÇÑ´Ù.

Ext.onReady¶ó´Â ¹®ÀåÀº "Áغñ°¡ µÇ¾ú´Ù¸é" À̶ó°í Çؼ®À» ÇÏ¸é µÉ°ÍÀÌ´Ù.
Áغñ°¡ µÇ¸é alertâÀ» ¶ç¿ì°Ô µÈ´Ù.

´ÙÀ½°ú °°ÀÌ Æ¯Á¤ ¹öÆ°À» Ŭ¸¯ÇÏ¿´À»¶§ alertâÀ» ¶ç¿ì°íÀÚ ÇÑ´Ù¸é ´ÙÀ½°ú °°ÀÌ ÇÏ¸é µÈ´Ù.


<script type="text/javascript">
function test(){
 Ext.Msg.alert('Hello','World');
};
</script>
</HEAD>

<BODY>
<input type="button" value="Ŭ¸¯" onclick="test()"/>
</BODY>



2. confirm°ú À¯»çÇÑ Ã¢, »ç¿ëÀÚ ¼±Åà alertâ ¶ç¿ì±â

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all-debug.js"></script>

<script type="text/javascript">
     Ext.onReady(function(){
        Ext.Msg.show({
        title: 'ÆÄÀÏ',
  msg: '»èÁ¦ÇϽðڽÀ´Ï±î?', 
            buttons: {
            yes: true,
            no: true,
            cancel: true
            },
   fn: function(btn) {
    Ext.Msg.alert('´ç½ÅÀÇ ¼±ÅÃÀº', btn);
   }
        });  
    });
    </script>
</HEAD>
<BODY>
</BODY>
</HTML>

»ç¿ëÀÚ°¡ ¾î¶°ÇÑ ¹öÆ°À» Ŭ¸¯Çß´ÂÁö¸¦ ¾Ë¾Æ³¾¼ö ÀÖ´Ù.
¼±Åÿ¡ µû¶ó ¿©·¯ °¡Áö »óȲÀ» ¾Æ·¡¿Í °°ÀÌ ´ëó¸¦ ÇÒ¼ö°¡ ÀÖ´Ù.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all-debug.js"></script>

<script>
 Ext.onReady(function(){
  Ext.Msg.show({
  title: 'Milton',
  msg: 'Have you seen my stapler?',
   buttons: {
   yes: true,
   no: true,
   cancel: true
   },
   icon: 'milton-icon',
   fn: function(btn) {
    Ext.Msg.alert('You Clicked', btn);
    switch(btn){
     case 'yes':
      Ext.Msg.prompt('Milton', 'Where is it?');
      break;
     case 'no':
      Ext.Msg.alert('Milton', 'Im going to burn the building down!'); 
      break;
     case 'cancel':
      Ext.Msg.wait('Saving tables to disk...','File Copy');
      break;
    }
   }
  });
 });
 </script>
</HEAD>
<BODY>
</BODY>
</HTML>

 


¶ÇÇÑ ¾Æ·¡¿Í °°ÀÌ »ç¿ëÀÚ°¡ ¼±ÅÃÇÏ°í ÀÔ·ÂÇÑ ´ÙÀ½, bodyÀÇ ³»¿ëÀ» ÀϺΠº¯°æÇÒ¼öµµ ÀÖ´Ù.
<html>
<head>
<title>Getting Started Example</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all-debug.js"></script>
<style type="text/css">
 .milton-icon {
 background: url(a.png) no-repeat;
 }
</style>

<script>
Ext.onReady(function(){
 Ext.BLANK_IMAGE_URL = 'sten_logo.png';
 Ext.Msg.show({
 title: 'Milton',
 msg: 'Have you seen my stapler?',
  buttons: {
  yes: true,
  no: true,
  cancel: true
  },
  icon: 'milton-icon',
  fn: function(btn) {
   Ext.Msg.alert('You Clicked', btn);
   switch(btn){
    case 'yes':
     Ext.Msg.prompt('Milton', 'Where is it?', function(btn,txt)
     {
      if (txt.toLowerCase() == 'the office') {
       Ext.get('my_id').dom.innerHTML = 'Dull Work';
      }else{
       Ext.get('my_id').dom.innerHTML = txt;
      }
      Ext.DomHelper.applyStyles('my_id',{background: 'transparent url

(img/sten_logo.png) 50% 50% no-repeat'});
     });
     break;
    case 'no':
     Ext.Msg.alert('Milton', 'Im going to burn the building down!',
     function() {
      Ext.DomHelper.applyStyles('my_id',{'background': 'transparent url

(img/sten_logo.png) 0 100% repeat-x'});
      Ext.DomHelper.applyStyles(Ext.getBody(),{'background-color': '#FF0000'});
      Ext.getBody().highlight('FFCC00',{endColor:'FF0000',duration: 6});
     });
     break;
    case 'cancel':
     Ext.Msg.wait('Saving tables to disk...','File Copy');
     break;
   }
  }
 });
});


</script>

</head>
<body>
<table border=0>
<tr>
 <td style="padding-left:30; padding-top:30;">
  <span style="font-size:25; font-weigth:bold;">2. The Staples of Ext</span>
 </td>
</tr>

<tr ><td style="padding-left:30; "><hr /></td></tr>

<tr >
 <td style="padding:30; ">
  <div id='my_id' style='width:200px;height:200px;'>test</div>
 </td>
</tr>
</table>
</body>
</html>




À̸§ Æнº¿öµå
ºñ¹Ð±Û (üũÇÏ¸é ±Û¾´À̸¸ ³»¿ëÀ» È®ÀÎÇÒ ¼ö ÀÖ½À´Ï´Ù.)
¿ÞÂÊÀÇ ±ÛÀÚ¸¦ ÀÔ·ÂÇϼ¼¿ä.

 
Copyright ¨Ï www.tnt.pe.kr. All rights reserved.