Extjs5.1学习笔记1——提示框等基本组件的使用

1、Extjs的组件配置方式，有两种：使用逗号分隔的参数，或者使用json配置对象，下面是这两种方法的示例代码：

①使用逗号分隔的参数

Ext.onReady(function(){
	Ext.Msg.alert("title", "hello world!");
});

②使用json配置对象

Ext.onReady(function(){
	var config = {
		title: 'title',
		msg: 'hello world!'
	};
	Ext.Msg.alert(config);
});

2、信息提示框组件的用法

①alert提示框的用法

注意：Ext中的alert提示框并非真正的窗口，而是用div+css实现的一个层，跟js中的alert相比，Ext中的alert是非阻塞式的，而js中的alert是阻塞的

下面是Ext中alert框的用法示例代码：

Ext.onReady(function(){
	//这里的参数分别代表提示框的标题和显示的消息内容，且消息内容支持HTML
	Ext.Msg.alert("title", "<font color='red'>hello world!</font>");
});

在浏览器中效果如下图：

alert函数中还可以添加第三个参数，为一个回调函数，该函数在点击了alert框中的OK按钮后被执行，如下代码所示：

Ext.onReady(function(){
	Ext.Msg.alert("title", "hello world", callback);
	//id为点击的按钮的文本
	function callback(id){
		Ext.Msg.alert('message', 'you clicked ' + id);
	}
});

在浏览器中显示如上图的消息框后，点击OK按钮，会弹出如下提示框：

②confirm确认框的使用，跟alert框类似的用法，示例代码如下：

Ext.onReady(function(){
	Ext.Msg.confirm('title', 'please chose a button', callback);
	function callback(id){
		Ext.Msg.alert('message', 'you chose ' + id);
	}
});

在浏览器中访问后，出现一个confirm框，选择某个按钮后，出现另一个提示框，效果图如下：

③prompt获取用户输入信息的提示框，该提示框的用法如下：

Ext.onReady(function(){
	//参数分别代表：提示框标题、提示框显示的提示信息，回调函数，提示框作用范围、是否可输入多行、输入框中的默认文本
	Ext.Msg.prompt('title', 'please input something:', callback, this, true, 'input here');
	//回调函数的参数分别代表：选中的按钮的文本，输入框中的文本
	function callback(id, msg){
		Ext.Msg.alert('message', 'you click button ' + id + ', input content is ' + msg);
	}
});

在浏览器中访问的效果如下图：

④wait提示框的使用，wait用于创建一个自动滚动的进度条，用法如下代码所示：

Ext.onReady(function(){
	//参数分别代表：提示框提示文本、提示框标题、进度条的配置对象
	Ext.Msg.wait('please wait while the operation is done', 'message', {
		text: 'waiting...'  /*配置进度条上的文字*/
	});
});

效果图如下：

⑤show生成提示框。上面的几种提示框虽然可以生成不同的样式，但是他们的函数内部都是通过调用show来实现的，show方法支持的配置很多，如下代码所示：

Ext.onReady(function(){
	Ext.Msg.show({
		title: 'title', /*提示框标题*/
		msg: 'hello world', /*提示框提示信息*/
		width: 300, /*提示框宽度*/
		maxWidth: 600, /*最大宽度*/
		minWidth: 300, /*最小宽度*/
		closable: false, /*提示框是否可关闭，若true，则右上角有关闭按钮*/
		modal: true, /*模态或非模态对话框*/
		fn: callback, /*回调函数*/
		buttons: Ext.Msg.OK, /*指定按钮，可选的有：Ext.Msg.CANCEL, Ext.Msg.NO, Ext.Msg.OK, Ext.Msg.YES, Ext.Msg.OKCANCEL, Ext.Msg.YESNO等等*/
		progress: true, /*true则显示一个进度条*/
		wait: true, /*true则显示一个自动滚动的进度条*/
		waitConfig: {text: 'waiting...'}, /*进度条的配置对象，在wait为true时才有效*/
		icon: Ext.Msg.INFO, /*指定提示框的图标，可选的有：Ext.Msg.INFO, Ext.Msg.ERROR, Ext.Msg.WARNING, Ext.Msg.QUESTION*/
		prompt: true, /*为true则会有一个输入框*/
		value: 'hello', /*prompt为true时，输入框中的默认文本*/
		multiline: true, /*prompt为true时，该属性为true则代表输入框可以多行输入*/
		defaultTextHeight: 120 /*当存在多行文本输入框时，指定输入框的高度，默认为75*/
	});
	function callback(){
		alert('callback method');
	}
});

浏览器中的效果如下图：

3、动态更新提示框

①使用updateText更新提示框中的文本，如下代码：

Ext.onReady(function(){
	var msgBox = Ext.Msg.show({
		title: 'title',
		msg: 'time now: ',
		modal: true,
		buttons: Ext.Msg.OKCANCEL,
		fn: function(){
			Ext.TaskManager.stop(task);
		}
	});
	var task = {
		run: function(){
			msgBox.updateText("time now: " + Ext.util.Format.date(new Date(), 'Y-m-d g:i:s A'));
		}, 
		interval: 1000 /*每隔1秒钟执行一次run对应的函数*/
	};
	//启动定时任务
	Ext.TaskManager.start(task);
});

浏览器中访问的效果图如下，这里的时间每隔一秒钟就会变化一次，所以看起来像是在不停地走的时间：

②updateProgress动态更新进度条，如下代码所示：

Ext.onReady(function(){
	var progressBar = Ext.Msg.show({
		title: 'title',
		msg: 'please wait...',
		progress: true,
		width: 300,
		buttons: Ext.Msg.OK
	});
	var count = 0;
	var percentage = 0;
	var progressText = "";
	var task = {
		run: function(){
			count++;
			percentage = count / 10;
			progressText = "progress: " + percentage * 100 + "%";
			//参数说明：percentage为0-1的数字，代表进度条进度，progressText代表进度条上的文本，最后一个参数代表提示框中显示的文本
			progressBar.updateProgress(percentage, progressText, "time now: " + Ext.util.Format.date(new Date(), "Y-m-d g:i:s A"));
			if(count == 10){
				Ext.TaskManager.stop(task);
			}
		},
		interval: 1000
	};
	Ext.TaskManager.start(task);
});

在浏览器中访问的效果如下图，这里的时间和进度条都会变化：

4、进度条组件的使用。在上面的提示框中，我们已经用到了进度条，但是都是在提示框中显示的进度条，Ext还专门提供了Ext.ProgressBar组件，该组件有两种模式：手动模式和自动模式，自动模式的进度条会自动滚动，手动模式的进度条需要我们来控制进度，下面是这两种进度条的使用示例代码：

Ext.onReady(function(){
	//自动模式的进度条
	var progressBar1 = new Ext.ProgressBar({
		renderTo: 'progressBar1', /*以id为progressBar1的div作为进度条的容器*/
		width: 500, /*进度条宽度500*/
		text: 'waiting...' /*进度条上显示的文本*/
	});
	//调用进度条的wait方法，让进度条自动更新进度
	progressBar1.wait({
		duration: 10000, /*进度条持续更新的时间，单位是毫秒*/
		interval: 1000, /*每一秒钟更新一次*/
		increment: 10, /*分10次更新完进度条*/
		scope: this, /*回调函数的执行范围*/
		text: 'waiting...', /*进度条上显示的文本*/
		fn: function(){ /*回调函数*/
			alert("自动模式的进度条进度完成");
		}
	});

	//手动更新的进度条
	var progressBar2 = new Ext.ProgressBar({
		renderTo: 'progressBar2',
		text: 'waiting...',
		width: 500
	});
	var count = 0;
	var percentage = 0;
	var progressText = "";
	var task = {
		run: function(){
			count++;
			percentage = count / 10;
			progressText = "progress: " + percentage * 100 + "%";
			//percentage为0-1的数字，代表进度条进度，progressText代表进度条上的文本，true代表进度条进度使用动画效果
			progressBar2.updateProgress(percentage, progressText, true);
			if(count == 10){
				Ext.TaskManager.stop(task);
				progressBar2.hide();
			}
		},
		interval: 1000,
	};
	Ext.TaskManager.start(task);
});

上面的代码在一个HTML文件中执行，该HTML文件中有两个div，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 下面是三个必须引入的文件 -->
		<link rel="stylesheet" type="text/css" href="../../build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
		<script src="../../build/ext-all.js"></script>
		<script src="../../build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
		<!-- 引入我们自己编写的js代码 -->
		<script type="text/javascript" src="index.js"></script>
	</head>
	<body style="padding: 50px;">
		<div style="width: 500px; padding: 30px; border: 1px solid black;">
			自动模式的进度条：<div id="progressBar1"></div>
		</div>
		<div style="width: 500px; padding: 30px; border: 1px solid black; margin-top: 20px;">
			手动模式的进度条：<div id="progressBar2"></div>
		</div>
	</body>
</html>

head标签中引入了Ext的相关文件，body中有两个div，在其中分别放了手动模式和自动模式的进度条，浏览器中访问的效果如下图：