ExtJs学习实例
ExtJs是一个功能强大且灵活的JavaScript框架,用于构建Rich Internet Applications(RIA)。在本文中,我们将探索ExtJs中MessageBox组件的四种基本方法:alert、confirm、prompt和show。
1. Ext.MessageBox.alert()方法
alert方法用于弹出警告框,提示用户某些信息。该方法有四个参数,其中title和msg为必选参数,function为可选参数。在关闭弹出窗口后,function将被触发。
例如:`Ext.MessageBox.alert("title", "msg");`
如果需要在关闭弹出窗口后执行某些操作,可以传入function参数:
`Ext.MessageBox.alert("title", "msg", function(){alert("关闭对话框后弹出!")});`
2. Ext.MessageBox.confirm()方法
confirm方法用于弹出确认框,提示用户进行选择。该方法与alert方法类似,但具有更多的交互性。confirm方法的回调函数将在用户点击某个按钮时被触发,并将按钮的值作为参数传递。
例如:`Ext.MessageBox.confirm("title", "msg", function(e){alert(e);});`
其中,e为用户点击的按钮的值,可以是yes、no或cancel。
3. Ext.MessageBox.prompt()方法
prompt方法用于弹出输入框,提示用户输入某些信息。该方法有六个参数,其中title和msg为必选参数,function为可选参数。在用户输入完成并点击确定按钮后,function将被触发,并将输入的文本作为参数传递。
例如:`Ext.MessageBox.prompt("title", "msg");`
如果需要在用户输入完成后执行某些操作,可以传入function参数:
`Ext.MessageBox.prompt("title", "msg", function(e, text){alert(e + "-" + text);});`
4. Ext.MessageBox.show()方法
show方法用于弹出对话框,具有高度的自定义性。该方法采用config配置形式,可以配置对话框的各种属性,例如动画效果、按钮样式等。
例如:`Ext.MessageBox.show({
title: 'title',
msg: 'msg',
animEl: 'id1',
buttons: Ext.MessageBox.OKCANCEL,
fn: function(btn){
if(btn == 'ok'){
alert('ok');
}else{
alert('cancel');
}
}
});`
在上面的示例中,我们使用了animEl参数来设置对话框的动画效果,并使用buttons参数来设置对话框的按钮样式。
ExtJs的MessageBox组件提供了四种基本方法,用于弹出警告框、确认框、输入框和自定义对话框。这些方法都具有高度的灵活性和可定制性,可以满足各种应用场景的需求。