Ext入门代码实战——基础篇

 Ext代码实战

 

 

知识一、信息提示框组件

  1.Ext.MessageBox.alert()

使用 alert ( String title, String msg, Function fn, Object scope ) ;

四个参数：前两个必选，后面是关闭窗口后触发函数

代码实战：

Ext.onReady(
		function TestMessageBox(){
			Ext.MessageBox.alert("标题","内容",function(e){
				document.write("关闭了对话框");
				
				if(e == 'ok'){
					document.write("单击了确定按钮");
				}else if(e == 'cancel'){
					document.write("单击了关闭按钮");
				}
				
			});
			
		}
);

2. Ext.MessageBox.confirm()

用法和alert()相同

实战代码

 

Ext.onReady(
		function TestMessageBox(){
			Ext.MessageBox.confirm("保存文件","是否保存文件",function(e){
				if(e == 'yes') {
					document.write("保存文件");
				} else if(e == 'no') {
					document.write("不保存文件");
				}
				});
		}
);

 

3.Ext.MessageBox.prompt()

使用prompt ( String title, String msg, Function fn, Object scope, Boolean/Number multiline );

 

其中multiline 为是否多行显示的意思

实战代码

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

 

4. Ext.MessageBox.show()

API解释：

 

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();
				}
			}
		});
	}
);