|
|
 <HTML>
<HEAD>
<TITLE> Ext Buttn and MessageBox 練習 </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 LANGUAGE="JavaScript">
 <!--
Ext.onReady(function()
  {
//構造一個普通Button
new Ext.Button({
text : '普通Alert', //按鈕上的文本
tooltip : '哈哈,成功了',
type : 'button', //如果不指定默認就為button
renderTo : 'd1', //渲染到
id : 'b1'
 });
//為按鈕注冊點擊事件
Ext.get('b1').on('click',function(e)
{
Ext.Msg.alert('第一個按鈕','您點擊了第一個按鈕!');
});
new Ext.Button({
text : '構造alert',
tooip : '提示',
type : 'button',
renderTo : 'd3',
id : 'b2'
});
Ext.get('b2').on('click',function(e)
{
//構造自定義提示框
Ext.Msg.show(
{
title : '提示',
msg : '您想保存修改嗎?',
buttons : Ext.Msg.YESNOCANCEL,
fn : processResult,
animEl : 'elId',
icon : Ext.MessageBox.QUESTION
});
});
//自定義提示框，處理事件
function processResult(btn)
{
if(btn == 'yes')
Ext.Msg.alert('提示','成功');
if(btn == 'no')
Ext.Msg.alert('提示','失敗');
if(btn == 'cancel')
Ext.Msg.alert('提示','取消');
}
new Ext.Button({
text : '集點事件',
tooip : '提示',
type : 'button',
renderTo : 'd4',
id : 'b3'
});
Ext.get('b3').on('mouseover',function(e)
{
Ext.Msg.alert('提示','焦點事件');
});
//下拉按鈕
new Ext.SplitButton({
renderTo : 'd2',
text : '下拉按鈕',
handler : function()
{
Ext.Msg.alert('提示','您點擊了下拉按鈕');
},
menu : new Ext.menu.Menu({
items:
[
{text : '下拉按鈕1' ,handler :function() //直接閉包
{
Ext.Msg.alert('下拉按鈕1','您點擊了下拉按鈕1');
}
},
{text : '下拉按鈕2',handler : item2Handler //將處理函數寫在外面
}
]
})
});
function item2Handler()
{
Ext.Msg.prompt('輸入','請輸入您的姓名:',function(btn,text)
{
if(btn == 'ok')
{
if(text == '')
{
Ext.Msg.alert('姓名提示','姓名不能為空');
}
else
{
Ext.Msg.alert('謝謝','<font color=red>' + text + '</font>感謝您的注冊');
}
}
});
}
});
 //-->
</SCRIPT>
</HEAD>
<BODY>
<p>
<br />
<div id='d1'></div>
<div id='d2'></div>
<div id='d3'></div>
<div id='d4'></div>
</BODY>
</HTML>
|