¿ì¼± °³¹ßÀ» Çϱ⿡ ¾Õ¼ µð·ºÅ丮±¸Á¶¸¦ ´ÙÀ½°ú °°ÀÌ ³õ°í °³¹ßÀ» Çϵµ·Ï ÇÏÀÚ.
¾ÕÀ¸·Î ¸ðµç ¼Ò½º´Â 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>