实用ExtJS教程100例-005:自定义对话框Ext.MessageBox.show

简介:

我们对ExtJS对话框进行了三篇演示:

通过上面三篇内容的演示,相信你已经基本上了解了ExtJS的基本样式,这篇文章将演示如何使用自定义ExtJS对话框。

Ext.MessageBox.show演示

要显示自定义的对话框,我们需要用到Ext.MessageBox.show方法。先来看一个简单的例子:

Ext.get("btn1").on("click", function () {
    Ext.MessageBox.show({
        title: "地址",
        msg: "请输入您的详细地址:",
        width: 300,
        buttons: Ext.MessageBox.OKCANCEL,
        multiline: true,
        fn: saveAddress,
        animateTarget: "btn1",
        icon: Ext.MessageBox.INFO
    });
});

function saveAddress(btnId, text) {
    if (btnId == "ok") {
        alert(text);
    }
    else {
        //其它的处理代码
    }
}

看到了吧,Ext.MessageBox.show方法的参数是一个配置对象,配置中有title、msg、width、buttons等配置项,用来决定对话框的显示内容。

这些配置项的说明如下:

  • title:标题
  • msg:内容
  • width:对话框窗口的宽度
  • buttons:对话框底部显示的按钮,它可以是下面的枚举值:
    • Ext.MessageBox.OK
    • Ext.MessageBox.YES
    • Ext.MessageBox.NO
    • Ext.MessageBox.CANCEL
  • 或者可以是一些按钮组合:
    • Ext.MessageBox.OKCANCEL
    • Ext.MessageBox.YESNO
    • Ext.MessageBox.YESNOCANCEL
  • multiline:为true的时候显示一个多行的输入框,默认为false
  • fn:回调函数,它接收三个参数:
    • buttonId:用户点击的按钮的id,如果是OK按,就是小写的ok。由于有四种按钮,所以它的值可以是:ok、no、yes、cancel
    • text:在有文本框的对话框中,text为用户输入的值
    • opt:传递给show方法的配置项
  • animateTarget:显示打开/关闭动画时候的目标元素,可以是元素id或Ext.dom.Element对象
  • icon:对话框中显示的图标,它的可用项有:
    • Ext.MessageBox.INFO
    • Ext.MessageBox.WARNING
    • Ext.MessageBox.QUESTION
    • Ext.MessageBox.ERROR

运行我们的示例,效果图如下【ExtJS自定义对话框在线示例,包含广告】:

image

我们可以使用自定义对话框显示之前所有的效果。

自定义alert

Ext.get("btn2").on("click", function () {
    Ext.MessageBox.show({
        title: "提示",
        msg: "您点击了按钮",
        buttons: Ext.MessageBox.OK
    });
});

自定义confirm

Ext.get("btn3").on("click", function () {
    Ext.MessageBox.show({
        title: "提示",
        msg: "确定删除吗?",
        buttons: Ext.MessageBox.OKCANCEL,
        fn: function (btnId) {
            if (btnId == "ok") {
                alert("点击了确定按钮");
            }
            else {

            }
        }
    });
});

自定义进度条对话框

Ext.get("btn4").on("click", function () {
    Ext.MessageBox.show({
        title: "进度条对话框",
        msg: "正在处理,请稍候...",
        progress: true
    });
    updateProgress(0);
});

我们的updateProgress()方法仍然使用ExtJS进度条对话框示例中的方法。

自定义等待对话框

Ext.get("btn5").on("click", function () {
    Ext.MessageBox.show({
        title: "等待对话框",
        msg: "正在处理,请稍候...",
        wait: true
    });
    Ext.defer(function () { Ext.MessageBox.close(); }, 3000);
});

本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。

如果认为此文对您有帮助,别忘了支持一下哦!

作者: 齐飞
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权,贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

转载:http://www.cnblogs.com/youring2/p/extjs-100-examples-005-custom-messagebox.html
目录
相关文章
|
Python Windows 容器
Python Tkinter教程(二)——Label控件、Frame控件、Button控件的完整参数和所有方法及详细用法
Python Tkinter教程(二)——Label控件、Frame控件、Button控件的完整参数和所有方法及详细用法
159 0
html文件里面怎么使用elementui的Message以及MessageBox
html文件里面怎么使用elementui的Message以及MessageBox
356 0
html文件里面怎么使用elementui的Message以及MessageBox
PyQt5 技术篇-设置输入框的placeholder方法,Qt Designer设置Line Edit、Text Edit编辑框的placeholder
PyQt5 技术篇-设置输入框的placeholder方法,Qt Designer设置Line Edit、Text Edit编辑框的placeholder
645 0
PyQt5 技术篇-设置输入框的placeholder方法,Qt Designer设置Line Edit、Text Edit编辑框的placeholder
|
Web App开发 JavaScript 容器

热门文章

最新文章