"这篇资源是关于ExtJs入门的学习实例,作者分享了自己对ExtJs作为后台开发工具的看法,并提供了几个核心组件Ext.MessageBox的使用方法,包括alert、confirm和prompt,以及show方法的基础应用。"
在ExtJs开发中,尤其是对于初学者来说,掌握基本的组件和方法是非常重要的。Ext.MessageBox是ExtJs提供的一种用于显示消息对话框的组件,它提供了多种交互方式,如警告、确认和输入等。以下是对所提到的Ext.MessageBox方法的详细说明:
1. Ext.MessageBox.alert()
这个方法用于显示一个简单的警告对话框,包含一个确定按钮。它接受三个参数:标题(title)、消息内容(msg)和一个可选的回调函数(function),回调函数在用户点击确定按钮后执行。例如:
```javascript
Ext.MessageBox.alert("标题", "消息内容");
Ext.MessageBox.alert("标题", "消息内容", function(){alert("关闭对话框后弹出!")});
```
2. Ext.MessageBox.confirm()
confirm方法与alert类似,但多了用户确认操作,包含“是”和“否”两个按钮。回调函数中的参数e表示用户选择的按钮值,可以是'yes'或'no'。例如:
```javascript
Ext.MessageBox.confirm("标题", "消息内容", function(e){alert(e);});
```
3. Ext.MessageBox.prompt()
prompt方法用于获取用户的输入。它有六个参数,除了标题、消息和回调函数外,还包括返回值(e,用户是否点击OK)、输入文本(text)和是否启用多行输入。回调函数接收两个参数,分别是用户的选择(e)和输入的文本(text)。例如:
```javascript
Ext.MessageBox.prompt("标题", "消息内容");
Ext.MessageBox.prompt("标题", "消息内容", function(e, text){alert(e + "-" + text);});
Ext.MessageBox.prompt("标题", "消息内容", function(e, text){alert(e + "-" + text);}, this, true);
```
其中,`true`表示开启多行输入,`this`通常代表当前上下文。
4. Ext.MessageBox.show()
show方法是最灵活的,允许通过配置对象(config)自定义对话框,可以实现更多复杂的交互。配置项包括所有alert、confirm和prompt的方法,还可以自定义按钮、样式等。例如:
```javascript
var config = {
title: '标题',
msg: '消息',
buttons: Ext.MessageBox.YESNO,
fn: function(buttonId) { /*...*/ },
icon: Ext.MessageBox.INFO
};
Ext.MessageBox.show(config);
```
以上就是基于ExtJs入门实例中关于Ext.MessageBox的基本使用方法。通过这些方法,开发者可以创建具有交互性的对话框,提升用户体验,同时在实际项目中进行更复杂的功能实现。