Ext实现waiting提示功能

Ext JS等待提示实践

最新推荐文章于 2024-12-13 10:35:15 发布

番茄鲨鱼面

最新推荐文章于 2024-12-13 10:35:15 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ext

本文链接：https://blog.youkuaiyun.com/xiakepan/article/details/46423327

Ext 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Ext JS实现带有等待提示的删除操作。通过创建一个消息框并结合任务运行器，可以在后台执行长时间的任务同时展示友好的等待提示给用户。这种实现方式适用于需要进行较长时间后台处理的应用场景。

<pre name="code" class="html"><html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Ext实现waiting提示功能</title>
		<link rel="stylesheet" type="text/css" href="./ext-2.0.2/resources/css/ext-all.css"/>
		<script src="./ext-2.0.2/adapter/ext/ext-base.js"></script>
		<script src="./ext-2.0.2/ext-all.js"></script>
		<script>
			Ext.onReady(function(){
				Ext.BLANK_IMAGE_URL="./ext-2.0.2/resources/images/default/s.gif";
			});
			
			var showWaiting = function(){
				var msgbox = Ext.MessageBox.show({
					title: '提示',
					msg: "正在删除记录，请稍侯...",
					modal: true,
					width: 300
				});
				var runner = new Ext.util.TaskRunner();
				//定义多线程
				var delTask ={
					run:function(){
        		//执行删除记录，这里是特意的阻塞来观察效果
        		Ext.Msg.alert('删除','正在执行删除操作……',function(){
							//删除完成
  						runner.stop(delTask);
          		msgbox.hide();
          		return;
        		});
					},
					interval: 10
				}
				runner.start(delTask);
			}
		</script>
	</head>
	<body>
		<h1>Ext实现waiting提示功能</h1>
		<button onclick="showWaiting(1);">waiting</button>
	</body>
</html>