ext弹出窗口.doc
文本预览下载声明
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
显示全部