文档详情

ext弹出窗口.doc

发布:2018-05-29约4.51千字共7页下载文档
文本预览下载声明
Ext弹出窗-超脱了一切的弹出窗口。 跳出来和缩回去总给人惊艳的感觉。 浏览器原声的alert(),confirm(),prompt()显得如此寒酸,而且还不能灵活配置,比如啥时候想加个按钮,删个按钮,或者改改按下按钮触发的事件了,都是难上加难的事情。 既然如此,为何不同ext提供的对话框呢?那么漂亮,那么好配置,可以拖啊,可以随便放什么东西,在里边用啥控件都可以,甚至放几个tab乱切换呀,连最小化窗口的功能都提供了。哈哈,神奇啊,完全可以让alert退役了。 2. 先看看最基本的三个例子 嘿嘿,为了加深认识,还是先去看看examples下的例子吧。1.x在dialog目录下。2.0在message-box目录下。 2.1. Ext.MessageBox.alert() Ext.MessageBox.alert(标题, 内容, function(btn) { alert(你刚刚点击了 + btn); }); 现在可以通过第一个参数修改窗口的标题,第二个参数决定窗口的的内容,第三个参数是你关闭按钮之后(无论是点ok按钮还是右上角那个负责关闭的小叉叉),就会执行的函数,嘿嘿,传说中的回调函数。 2.2. Ext.MessageBox.confirm() Ext.MessageBox.confirm(选择框, 你到底是选择yes还是no?, function(btn) { alert(你刚刚点击了 + btn); }); 选择yes或者是no,然后回调函数里可以知道你到底是选择了哪个东东。 2.3. Ext.MessageBox.prompt() Ext.MessageBox.prompt(输入框, 随便输入一些东西, function(btn, text) { alert(你刚刚点击了 + btn + ,刚刚输入了 + text); }); 随便输入几个字,然后点按钮,它会告诉你输入了些什么东西 3. 如果你想的话,可以控制得更多 3.1. 可以输入多行的输入框 Ext.MessageBox.show({ title: 多行输入框, msg: 你可以输入好几行, width:300, buttons: Ext.MessageBox.OKCANCEL, multiline: true, fn: function(btn, text) { alert(你刚刚点击了 + btn + ,刚刚输入了 + text); } }); 其实只需要show,我们就可以构造各种各样的窗口了,title代表标题,msg代表输出的内容,buttons是显示按钮,multiline告诉我们可以输入好几行,最后用fn这个回调函数接受我们想要得到的结果。 3.2. 再看一个例子呗 可能让我们对show这个方法的理解更深 Ext.MessageBox.show({ title:随便按个按钮, msg: 从三个按钮里随便选择一个, buttons: Ext.MessageBox.YESNOCANCEL, fn: function(btn) { alert(你刚刚点击了 + btn); } }); 我相信buttons这个参数是一个数组,里边的这个参数绝对了应该显示哪些按钮,Ext.MessageBox给我们提供了一些预先定义好的组合,比如YESNOCANCEL,OKCANCEL,可以直接使用。 3.3. 下一个例子是进度条 实际上只需要将progress这个属性设置为true,对话框里就会显示个条条。 Ext.MessageBox.show({ title: 请等待, msg: 读取数据中, width:240, progress:true, closable:false }); 看到进度条了吧,不过它可不会自动滚啊滚的,你需要调用Ext.MessageBox.updateProgress让进度条发生变化。 另外多说一句,closable: false会隐藏对话框右上角的小叉叉,这样咱们就不能随便关掉它了。 现在让咱们加上更新进度条的函数,使用timeout定时更新,这样咱们就可以看到效果了。呵呵~效果真不错,这样咱们以后就可以使用进度条了。 var f = function(v){ return function(){ if(v == 11){ Ext.Mess
显示全部
相似文档