04第四讲信息提示框组件.doc

第四讲 EXT的信息提示框组件1. Ext.MessageBox.alert()方法标准提示框APIalert ( String title, String msg, Function fn, Object scope ) : Ext.MessageBox参数项：title : StringThe title bar textmsg : StringThe message box body textfn : Function(optional) The callback function invoked after the message box is closedscope : Object(optional) The scope of the callback function有四个参数，我们这里主要介绍前面三个。title，标题，必选msg，本体文本，必选fn，在关闭弹出窗口后触发该函数，可选。示例一：Ext.onReady(function TestMessageBox() /声明函数的方式Ext.MessageBox.alert(测试,弹出提示框););添加事件处理Ext.onReady(function TestMessageBox() Ext.MessageBox.alert(测试,弹出对话框,function() document.write(关闭对话框); /在页面上直接的书写););对按钮之进行判断Ext.onReady(function TestMessageBox() Ext.MessageBox.alert(测试,弹出对话框,function(e) if(e = ok) /此种判断价值不高document.write(单击了确定按钮); else if(e = cancel) document.write(单击了关闭按钮);););与页面的组件绑定使用 页面上创建按钮组件 Ext.onReady(function() Ext.get(btn).on(click ,function()Ext.MessageBox.alert(提示,这是标准的信息的弹出);/Message的弹出包含两个message ,第一是title 第二是内容/Ext.Msg.alert(另外方式的弹出););2. Ext.MessageBox.confirm()方法确认对话框APIconfirm ( String title, String msg, Function fn, Object scope ) : Ext.MessageBox参数项：title : StringThe title bar textmsg : StringThe message box body textfn : Function(optional) The callback function invoked after the message box is closedscope : Object(optional) The scope of the callback function参数和alert方法一样。示例二：Ext.onReady(function TestMessageBox() Ext.MessageBox.confirm(保存,是否保存文件););添加事件处理。Ext.onReady(function TestMessageBox() Ext.MessageBox.confirm(保存,是否保存文件,function(e)document.write(e);););对按钮值进行判断。Ext.onReady(function TestMessageBox() Ext.MessageBox.confirm(保存,是否保存文件,function(e)if(e = yes) document.write(保存文件); else if(e = no) document.write(不保存文件);););与页面的元素绑定 Ext.get(btnConfirm).on(click,function()Ext.Msg.confirm(请确认,是否要删除该记录 , function(button,text) /该函数为回调函数,可以包含两个参数/* * button:点击的按钮 * text:有活动时 输入选项时输入的内容*/if (button=yes) /注意比较的字符串的书写Ext.MessageBox.alert(提示,操作已经执行!); else /dosomthing);3.Ext.MessageBmpt()方法输入对话框APIprompt ( String title, String msg, Function fn, Object scope, Boolean/Number multiline ) : Ext.MessageBoxtitle : StringThe title bar textmsg : StringThe message box body textfn : Function(optional) The callback function invoked after the message box is closedscope : Object(optional) The scope of the callback functionmultiline : Boolean/Number(optional) True to create a multiline textbox using the defaultTextHeight property, or the height in pixels to create the textbox (defaults to false / single-line)multiline参数用来设置是否为多行。示例三：Ext.onReady(function TestMessageBox() Ext.MessageBmpt(测试,请输入你的姓名););多行文本Ext.onReady(function TestMessageBox() Ext.MessageBmpt(测试,请输入你的留言,null,null,true););事件处理Ext.onReady(function TestMessageBox() Ext.MessageBmpt(测试,请输入你的留言,function(e,text) if(e = ok) document.write(text);,null,true););与页面的元素绑定 /输入对话框Ext.get(btnPrompt).on(click,function()Ext.Mmpt(请输入.,姓名: ,function(button,text) /该函数为回调函数,可以包含两个参数if (button=ok) /注意此时是okExt.MessageBox.alert(您输入的姓名,text); else /dosomthing);4. Ext.MessageBox.show()方法自定义对话框APIshow ( Object config ) : Ext.MessageBoxanimEl String/Element 对话框弹出和关闭时的动画效果buttons Object/Boolean 弹出框按钮的设置closable Boolean 如果为false，则不显示右上角的小叉叉，默认为true。cls String 将客户自定的CSS应用到该对话框中defaultTextHeight Number 多行文本框中文本高度fn Function 关闭弹出框后执行的函数icon String 弹出框内容前面的图标maxWidth Number 最大大小(默认600)minWidth Number 最小大小(默认100)modal Boolean 是否为模式msg String 消息的内容multiline Boolean 设为true，则弹出框带有多行输入框progress Boolean 设为true，显示进度条progressText String 显示在进度条上的文本prompt Boolean 设为true，则弹出框带有输入框proxyDrag Boolean 设置为true，则为拖拽的时候显示一个轻量级别代理title String 标题value String 文本框中的值wait Boolean 设为true，动态显示progresswaitConfig Object 配置参数，以控制显示progresswidth Number 弹出框的宽度示例四：Ext.onReady(function TestMessageBox() Ext.MessageBox.show(title:测试标题,msg:测试内容,buttons:Ext.MessageBox.OKCANCEL,icon:Ext.MessageBox.INFO,prompt:true,multiline:true,width:400,defaultTextHeight :150););进度条Ext.onReady(function TestMessageBox() Ext.MessageBox.show(title:进度条,msg:5秒后自动进入系统,progress:true,width:500,wait:true,waitConfig:interval:500,duration:5000,fn:function() Ext.MessageBox.hide();););与页面的元素绑定 /自定义的对话框Ext.get(btnCustomer).on(click,function()Ext.Msg.show(/使用Msg对话框的构造方法title:自定义的对话框,msg:提示信息,buttons:Ext.Msg.YESNOCANCEL,/按钮的组成icon:Ext.Msg.QUESTION,fn:save /指明回调函数,表示点击完成的事件的操作););_/定义自定义对话框的回调函数function save(button)if(button=yes)alert(操作成功.);练习题目: