|
|
 <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>
|