Ext的对话框都封装在Ext.MessageBox类,该类还有一个简写形式即Ext.Msg,可以直接通过Ext.MessageBox或Ext.Msg来直接调用相应的对话框方法来显示Ext对话框。看下面的代码:
Alert
标准的“确认”对话框。
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("请注意","这是ExtJS的提示框");
});
});
Html页面中的内容:
<input id="btnAlert" type="button" value="alert框" />
执行程序,点击上面的“alert框”按钮,将会在页面上显示如下图所示的对话框。
Ext.MessageBox.alert("请注意","这是ExtJS的提示框",showResult);//调用回调函数显示你点击了是什么按钮
function showResult(btn){
Ext.example.msg('按钮被点击', '您点击了 “{0}” 按钮。', btn);
};
在浏览器上方会出现如下的消息
Confirm
标准的“是 / 否”对话框。
我们可以根据需要显示自下定义的对话框。普通对话框一般包括四个参数,
比如confirm的方法签名为
confirm ( String title, String msg,[Function fn], [Object scope] )
,参数title表示对话框的标题,参数msg表示对话框中的提示信息,这两个参数是必须的;可选的参数fn表示当关闭对话框后执行的回调函数,参数
scope表示回调函数的执行作用域。回调函数可以包含两个参数,即button与text,button表示点击的按钮,text表示对话框中有活动输
入选项时输入的文本内容。我们可以在回调函数中通过button参数来判断用户作了什么什么选择,可以通过text来读取在对话框中输入的内容。
这样当用户点击对话框中的yes按钮时,就会执行相应的操作,而选择no则忽略操作。
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
if(button=="yes"){
//执行删除操作
alert("成功删除");
}
});
});
});
prompt
标准的“提示输入”对话框。
看看prompt框,我们看下面的代码:
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("输入提示框","请输入你的新年愿望:",function(button,text){
if(button=="ok"){
alert("你的新年愿望是:"+text);
}
else alert("你放弃了录入!");
});
});
});
Html页面:
<input id="btn" type="button" value="对话框" />
点击上面的“对话框”按钮可以显示如下图所示的内容,如果点击OK按钮则会输入你输入的文本内容,选择cancel按钮则会提示放弃了录入,如下图所示:
在实际应用中,可以直接使用MessageBox的show方法来显示自定义的对话框,如下面的代码:
function save(button)
{
if(button=="yes")
{
//执行数据保存操作
}
else if(button=="no")
{
//不保存数据
}
else
{
//取消当前操作
}
}
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.Msg.show({
title:'保存数据',
msg: '你已经作了一些数据操作,是否要保存当前内容的修改?',
buttons: Ext.Msg.YESNOCANCEL,
fn: save,
icon: Ext.MessageBox.QUESTION});
});
});
点击“对话框”按钮可显示一个自定义的保存数据对话框,对话框中包含yes、no、cancel三个按钮,可以在回调函数save中根据点击的按钮执行相应的操作,如图xx所示。
posted on 2008-05-18 10:31
Crying 阅读(865)
评论(0) 编辑 收藏 所属分类:
EXT2.0