Extjs-弹出窗口 Ext.MessageBox
2012-08-14 17:23
363 查看
1.Ext.MessageBox.alert()
第一个参数是修改窗口的标题,
第二个参数用来决定窗口的内容,
第三个参数是关闭按钮之后执行的回调函数
2.Ext.MessageBox.confirm()
confirm对话框为用户提供了两个选项一个Yes或者No
3. Ext.MessageBox.prompt()
prompt对话框为用户提供了允许用户输入一段字符串,然后提交给javaScript处理,它提供了OK和取消按钮
4.可以输入多行的输入框
修改prompt函数,将原来只能接受单行的字符串改成多行
使用Ext.MessageBox.show()来实现
效果图
代码
5.自定义对话框按钮
效果图
代码
6.进度条
6.1.动态进度条需要调用Ext.MessageBox.updateProgress()函数,更新进度条我们使用timeout定时器
效果图
代码
6.2.自动变化的进度条
6.3.动画效果
第一个参数是修改窗口的标题,
第二个参数用来决定窗口的内容,
第三个参数是关闭按钮之后执行的回调函数
Ext.MessageBox.alert('标题', '内容', function(btn) { alert('你刚刚点击了 ' + btn); });
2.Ext.MessageBox.confirm()
confirm对话框为用户提供了两个选项一个Yes或者No
Ext.MessageBox.confirm('选择框', '你到底是选择yes还是no?', function(btn) { alert('你刚刚点击了 ' + btn); });
3. Ext.MessageBox.prompt()
prompt对话框为用户提供了允许用户输入一段字符串,然后提交给javaScript处理,它提供了OK和取消按钮
Ext.MessageBox.prompt('输入框', '随便输入一些东西', function(btn, text) { alert('你刚刚点击了 ' + btn + ',刚刚输入了 ' + text); });
4.可以输入多行的输入框
修改prompt函数,将原来只能接受单行的字符串改成多行
使用Ext.MessageBox.show()来实现
效果图
代码
Ext.MessageBox.show({ title: '多行输入框', msg: '你可以输入好几行', width:300, buttons: Ext.MessageBox.OKCANCEL, //表示可以输入多行 multiline: true, //回调函数,会在用户关闭对话框处理我们需要的结果 fn: function(btn, text) { alert('你刚刚点击了 ' + btn + ',刚刚输入了 ' + text); } });
5.自定义对话框按钮
效果图
代码
Ext.MessageBox.show({ title:'随便按个按钮', msg: '从三个按钮里随便选择一个', //YESNOCANCEL是定义在Ext的变量他的值是{yes:true,no:true,cancel:true} buttons: Ext.MessageBox.YESNOCANCEL, fn: function(btn) { alert('你刚刚点击了 ' + btn); } });
6.进度条
6.1.动态进度条需要调用Ext.MessageBox.updateProgress()函数,更新进度条我们使用timeout定时器
效果图
代码
Ext.MessageBox.show({ title: '请等待', msg: '读取数据中', width:240, progress:true, closable:false }); //上面的代码和下面这行代码是等效的 //Ext.MessageBox.progress('请等待','读取数据中'); var f = function(v){ return function(){ if(v == 11){ Ext.MessageBox.hide(); }else{ Ext.MessageBox.updateProgress(v/10, '正在读取第 ' + v + ' 个,一共10个。'); } }; }; for(var i = 1; i < 12; i++){ setTimeout(f(i), i*1000); }
6.2.自动变化的进度条
Ext.MessageBox.wait('请等待','读取数据中');
6.3.动画效果
Ext.MessageBox.show({ title:'随便按个按钮', msg: '从三个按钮里随便选择一个', buttons: Ext.MessageBox.YESNOCANCEL, fn: function(btn) { alert('你刚刚点击了 ' + btn); }, animEl: 'dialog' }); <div id="dialog"></div>
相关文章推荐
- ExtJS前端框架EXT弹出窗口事件
- extjs4 多个模态 modal 窗口在IE8下第二个模态窗口及 Ext.MessageBox被modal窗口被遮盖的解决方法
- ExtJs--02--MessageBox相关弹出窗口alert,prompt,confirm采用
- Ext.Net\ExtJs弹出消息Alert、MessageBox、Confirm使用详解
- EXTJS6.2 使用弹出确认框窗口Ext.Msg.show
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- extjs 用超链接怎么弹出一个ext.window的新窗口
- Extjs-弹出窗口 Ext.Window
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- Ext 弹出窗口(Ext.MessageBox) 中文问题
- ExtJS4 Ext.create弹出新窗口
- EXT窗口Window及对话框MessageBox
- (8) Extjs4.2 等待对话框Ext.MessageBox.wait 自定义对话框Ext.MessageBox.show
- 设计第二个弹出窗口(MessageBox)
- Ext.Net弹出窗口回写父窗口
- ExtJS的使用方法汇总4——拖放以及弹出窗口
- 深入浅出ExtJS 第七章 弹出窗口
- WinForm------弹出MessageBox窗口的同时隐藏当前窗口