------------------------------------------------------------------------------------HTML--------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="jiaoben2.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<input type="button" value="alert" οnclick="extjsAlert2();">
<input type="button" value="Prompt" οnclick="extjsPrompt();">
<input type="button" value="Custom" οnclick="extjsCustom();">
<input type="button" value="Animal" id="fly" οnclick="extjsAnimal();"> <br>
<input type="text" id="name">
<input type="button" id="btn" value="we hou"> <br>
<div id="al"> slideIn </div> <br>
<div id="a2"> highlight </div> <br>
<div id="a3"> frame </div> <br>
<div id="a4"> fadeIn </div>
<div id="a5"> fadeOut </div> <br>
<div id="a8"> fadeOut </div> <br>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------JS--------------------------------------------------------------------------------------------------------------------------------------------
Ext.onReady(function() {
extjsAlert2=function(){ //提示框
Ext.MessageBox.alert ("122","1221111",function()
{
alert("3333333333333333");
});
}
extjsPrompt=function(){ //輸入框
Ext.MessageBox.prompt("shu ru kuang","shu ru name:",function(btn,txt){
Ext.MessageBox.alert("jie guo","nin dian ji le" + btn + " an niu ,<br> input details "+ txt);
},this,200);
}
extjsComfirm=function(){ //確認框
Ext.MessageBox.Comfirm(" sure ","please onclick xia mian de button to choose:",function(btn){
Ext.MessageBox.alert("you click de button is :" + btn );
},this,100);
}
extjsCustom=function(){
var config={
title:" messsage kuang",
msg:"this is DIY kuang",
width:400, multiline:true, closable:false,
buttons:Ext.MessageBox.YESNOCANCEL,
icon:Ext.MessageBox.QUESTION, fn:function(btn,txt){
Ext.MessageBox.alert("jie guo","nin dian ji le'YES' button <br> , input details: "+ txt);
}
};
Ext.MessageBox.show(config);
}
extjsAnimal=function(){ //飛來的框框
var config={
title:"fly of messsage kuang",
msg:"this is DIY kuang",
width:400, multiline:true, closable:false,
buttons:Ext.MessageBox.YESNOCANCEL,
icon:Ext.MessageBox.QUESTION, animEl:"fly"
};
Ext.MessageBox.show(config);
}
Ext.get("btn").on("click",function() { //跳寬出問候
var name=Ext.get("name").dom.value;
Ext.Msg.alert("nin hao ","ni hao,"+ name +",pleasen recive wen hou from Ext ");
});
Ext.get("al").applyStyles({position: "absolute",top:200,left:200,backgroundColor:"red",width:100,height:100}) //10秒鐘之內將div從右邊滑入
.slideIn("r",{duration:5});
Ext.get("a2").applyStyles({position: "absolute",top:300,left:400,backgroundColor:"red",width:120,height:120}) /*顏色漸變*/
.highlight("0000ff" /*起始顏色*/,{
attr:'background-color', /*我們改變的是背景顏色*/
duration:4, /*動畫持續時間*/
endColor:"ff0000" /*結束顏色*/
});
Ext.get("a3").applyStyles({position: "absolute",top:400,left:400,backgroundColor:"red",width:120,height:120}) /*三個紅色的波紋持續3秒*/
.frame("ff0000",3,{duration:3}); /*波紋顏色，波紋個數，選項配置*/
Ext.get("a4").applyStyles({position: "absolute",top:500,left:500,backgroundColor:"red",width:120,height:120})
/*元素從透明變爲不透明，結束時的透明度可以根據 endOpacity來指定*/
.fadeIn({endOpacity:1,duration:4}); /*endOpacity可以是0到1之間的任意數如：.5*/
Ext.get("a5").applyStyles({position: "absolute",top:600,left:600,backgroundColor:"red",width:120,height:120})
/*元素從不透明變爲透明，結束時的透明度可以根據 endOpacity來指定*/
.fadeOut({endOpacity:.2,duration:4,remove:false,useDisplay:false}); /*endOpacity可以是0到1之間的任意數如：.5*/
Ext.get("a8").applyStyles({position: "absolute",top:300,left:900,backgroundColor:"red",width:100,height:100})
/*元素從視圖滑出並伴隨着漸隱，作爲可選參數傳入的定位描點將被設置爲滑出的結束點*/
.ghost('b',{easing:'easeOut',duration:3,remove:false,useDisplay:false}); /*可以是任意數比如：3*/
});