ExtJS中MessageBox介绍

来源：互联网发布：js防水涂料速溶单组编辑：程序博客网时间：2024/05/21 06:53

以下是用到的html：

[html]

?
1
2
3
4
5
6
7
8
9
<h1>各种消息框</h1>
<divid="div1"class="content">
<buttonid="bt1"type="button">Confirm</button>
<buttonid="bt2"type="button">Prompt</button>
<buttonid="bt3"type="button">DIY窗口</button>
<buttonid="bt4"type="button">进度条</button>
<buttonid="bt5"type="button">进度条2</button>
<buttonid="bt6"type="button">wait</button>
</div>

一、警告对话框和确认对话框

展示一个带“是”，“否”按钮的确认对话框。当单击按钮时，执行回调函数，获取按钮类型，并弹出一个警告对话框。

[Js]

?
1
2
3
4
5
Ext.get("bt1").on("click",function () {
    Ext.MessageBox.confirm("标题","详细信息内容",function (btn) {
        Ext.Msg.alert("提示","你点击了" + btn + "按钮");
    });
});

效果展示：

二、输入对话框

展示一个带文本框的对话框，可以供用户录入。单击按钮后可以获取文本框的内容。

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
Ext.get("bt2").on("click",function () {
    Ext.MessageBox.prompt(
    "标题",
    "详细信息内容",
    function(btn, text) {
        Ext.Msg.alert("提示","你点击了" + btn + "按钮,获取的文本：" + text);
    },
    this,
    true,      //表示文本框为多行文本框
    "初始文本");
});

效果展示：

三、自定义DIY对话框

展示一个自定义的对话框，可以定义图标样式，按钮组的类型，是否带文本框，是否带进度条等信息。

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Ext.get("bt3").on("click",function () {
    Ext.MessageBox.show({
        title:"标题",
        msg:"详细信息内容",
        buttons: Ext.MessageBox.YESNOCANCEL,   //对话框的按钮组合
        multiline:false,                      //有文本框时，是否为多行文本框
        closable:false,                       //是否可关闭
        prompt:true,
        icon: Ext.MessageBox.WARNING,
        iconCls:"add16",
        width: 400,
        proxyDrag:true,
        value:"初始文本",
        progress:true,
        progressText:"加载中..",
        animateTarget:"bt3"
    });
});

效果展示：

四、加载进度条对话框

展示一个带加载进度条的对话框，提示当前执行任务的进度信息。

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Ext.get('bt4').on('click',function () {
    Ext.MessageBox.show({
        title:'加载窗口',
        msg:'详细信息内容',
        progressText:'加载中...',
        width: 300,
        progress:true,
        closable:false,
        animateTarget:'bt4'
    });
 
    //模拟加载环境
    varf = function(v) {
        returnfunction () {
            if(v == 12) {
                Ext.MessageBox.hide();
                Ext.Msg.alert("提示","加载完毕！");
            }else {
                vari = v / 11;
                Ext.MessageBox.updateProgress(i, Math.round(100 * i) +'% 完成');
            }
        };
    };
    for(vari = 1; i < 13; i++) {
        setTimeout(f(i), i * 200);
    }
});

效果展示：

五、等待进度条对话框

展示等待进度条的对话框，提示用户当前正在等待某一任务执行。

[Js]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Ext.get('bt5').on('click',function () {
    Ext.MessageBox.show({
        msg:'正在保存数据..',
        progressText:'保存中...',
        width: 300,
        wait:true,
        waitConfig: { interval: 200 },
        icon:'download',
        animateTarget:'bt5'
    });
    setTimeout(function() {
        Ext.MessageBox.hide();
        Ext.Msg.alert("提示","保存完毕！");
    }, 3000);
});

效果展示：

六、基本的等待对话框

这里演示基本的等待对话框的实现方式。

[Js]

?
1
2
3
4
5
6
7
8
9
Ext.get('bt6').on('click',function () {
    Ext.MessageBox.wait("详细信息内容","标题", {
        interval: 100      //进度条加载速度
    });
    setTimeout(function() {
        Ext.MessageBox.hide();
        Ext.Msg.alert("提示","完毕！");
    }, 35000);
});

效果展示：