EXT对话框

阅读更多
由于传统使用alert、confirm 等方法产生的对话框非常古板,不好看。因此,ExtJS 提供
了一套非常漂亮的对话框,可以使用这些对话框代替传统的alert、confirm 等,实现华丽的
应用程序界面。
Ext 的对话框都封装在Ext.MessageBox 类,该类还有一个简写形式即Ext.Msg,可以直
接通过Ext.MessageBox 或Ext.Msg 来直接调用相应的对话框方法来显示Ext 对话框。看下
面的代码:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert("请注意","这是ExtJS的提示框");
});
});

Html 页面中的内容:

除了alert 以外,Ext 还包含confirm、prompt、progress、wait 等对话框,另外我们可以
根据需要显示自下定义的对话框。普通对话框一般包括四个参数,比如confirm 的方法签
名为confirm ( String title, String msg, [Function fn], [Object scope] ) ,参数title 表示对话框的
标题,参数msg 表示对话框中的提示信息,这两个参数是必须的;可选的参数fn 表示当关
闭对话框后执行的回调函数,参数scope 表示回调函数的执行作用域。回调函数可以包含两
个参数,即button 与text,button 表示点击的按钮,text 表示对话框中有活动输入选项时输
入的文本内容。我们可以在回调函数中通过button 参数来判断用户作了什么什么选择,可
以通过text 来读取在对话框中输入的内容。看下面的例子:
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
alert(button);
alert(text);
});
});
});

Html 内容:

点击对话框按钮将会出现下面的对话框,然后选择yes 或no 则会用传统的提示框输出
回调函数中button 及text 参数的内容。
因此,在实际的应用中,上面的代码可以改成如下的内容:
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.confirm("请确认","是否真的要删除指定的内容",function(button,text){
if(button=="yes"){
//执行删除操作
alert("成功删除");
}
});
});
});

这样当用户点击对话框中的yes 按钮时,就会执行相应的操作,而选择no 则忽略操作。
下面再看看prompt 框,我们看下面的代码:
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt("输入提示框","请输入你的新年愿望:",function(button,text){
if(button=="ok"){
Ext.Msg.alert("提示","你的新年愿望是:"+text);
}
else 
Ext.Msg.alert("提示","你放弃了录入!");
});
});
Html 页面:

点击上面的“对话框”按钮可以显示如下图所示的内容,如果点击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 中根据点击的按钮执行相应的操作。


});

你可能感兴趣的:(ext)