ExtJS基础第二讲学习

第二讲：信息提示框组件

1. Ext.MessageBox.alert()方法
2. Ext.MessageBox.confirm()方法
3. Ext.MessageBox.prompt()方法
4. Ext.MessageBox.show()方法

主要就是对JS的一些方法进行了自己封装，具体用的时候可以查看对应的API再就和代码学习

1. Ext.MessageBox.alert()方法

API

alert ( String title, String msg, Function fn, Object scope ) : Ext.MessageBox 参数项： title : String The title bar text msg : String The message box body text fn : Function (optional) The callback function invoked after the message box is closed scope : 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("单击了关闭按钮"); } }); } );

 

2. Ext.MessageBox.confirm()方法

API

confirm ( String title, String msg, Function fn, Object scope ) : Ext.MessageBox   参数项： title : String The title bar text msg : String The message box body text fn : Function (optional) The callback function invoked after the message box is closed scope : 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("不保存文件"); } }); } );

 

 

3.Ext.MessageBox.prompt()方法

API

prompt ( String title, String msg, Function fn, Object scope, Boolean/Number multiline ) : Ext.MessageBox   title : String The title bar text msg : String The message box body text fn : Function (optional) The callback function invoked after the message box is closed scope : Object (optional) The scope of the callback function multiline : 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.MessageBox.prompt("测试","请输入你的姓名"); } );

多行文本

Ext.onReady( function TestMessageBox() { Ext.MessageBox.prompt("测试","请输入你的留言",null,null,true); } );

事件处理

Ext.onReady( function TestMessageBox() { Ext.MessageBox.prompt("测试","请输入你的留言",function(e,text) { if(e == "ok") { document.write(text); } },null,true); } );

 

 

 

 

4. Ext.MessageBox.show()方法

API

show ( Object config ) : Ext.MessageBox   animEl            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，动态显示progress waitConfig        Object            配置参数，以控制显示progress width             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(); } } }); } ); 1. Ext.MessageBox.alert()方法 API alert ( String title, String msg, Function fn, Object scope ) : Ext.MessageBox 参数项： title : String The title bar text msg : String The message box body text fn : Function (optional) The callback function invoked after the message box is closed scope : 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("单击了关闭按钮"); } }); } );   2. Ext.MessageBox.confirm()方法 API confirm ( String title, String msg, Function fn, Object scope ) : Ext.MessageBox   参数项： title : String The title bar text msg : String The message box body text fn : Function (optional) The callback function invoked after the message box is closed scope : 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("不保存文件"); } }); } );     3.Ext.MessageBox.prompt()方法 API prompt ( String title, String msg, Function fn, Object scope, Boolean/Number multiline ) : Ext.MessageBox   title : String The title bar text msg : String The message box body text fn : Function (optional) The callback function invoked after the message box is closed scope : Object (optional) The scope of the callback function multiline : 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.MessageBox.prompt("测试","请输入你的姓名"); } ); 多行文本 Ext.onReady( function TestMessageBox() { Ext.MessageBox.prompt("测试","请输入你的留言",null,null,true); } ); 事件处理 Ext.onReady( function TestMessageBox() { Ext.MessageBox.prompt("测试","请输入你的留言",function(e,text) { if(e == "ok") { document.write(text); } },null,true); } );         4. Ext.MessageBox.show()方法 API show ( Object config ) : Ext.MessageBox   animEl            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，动态显示progress waitConfig        Object            配置参数，以控制显示progress width             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(); } } }); } );