extjs学习笔记-----消息框002

最新推荐文章于 2020-12-31 13:31:31 发布

bzuld

最新推荐文章于 2020-12-31 13:31:31 发布

阅读量679

点赞数

分类专栏： Extjs学习笔记

本文链接：https://blog.csdn.net/bzuld/article/details/8939523

版权

Extjs学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.提示框

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/resources/css/ext-all.css" />
 	<script type="text/javascript" src="<%=basePath%>ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="<%=basePath%>ext/ext-all.js"></script>
  	<script type="text/javascript">
  		Ext.onReady(function (){
  			/*
  				Ext的消息框
  				Ext.MessageBox.alert(String title,String message,Function fn,Object scope);
  				title:标题
  				message:提示消息
  				fn:提示框关闭后自动调用的回调函数
  				scope:作用域
  			*/
			Ext.MessageBox.alert("提示框","提示信息");
			Ext.MessageBox.alert("提示框","这是提示信息",function(){
				alert("123456");
			});
		})
  	</script>
  </head>
  <body>
  </body>
</html>

2.输入框：

<script type="text/javascript">
  		Ext.onReady(function (){
			/**
			 * Ext.MessageBox.prompt(String title,String msg,Function fn,Object scope,Boolean/Number multiline)
			 * title:标题
			 * msg:提示信息
			 * fn:提示框关闭后自动调用的函数
			 * scope:作用域
			 * 最后一个参数：为true或者是数字将允许输入多行或者指定默认高度。
			 */
			Ext.MessageBox.prompt("输入框","输入你的姓名",function(button,text){
				Ext.MessageBox.alert("结果","你点击了"+button+"按扭，<br>输入的内容为"+text);
			});
		})
  	</script>

3.确认框：

<script type="text/javascript">
  		Ext.onReady(function (){
			/**
			 * Ext.MessageBox.confirm(String title,String msg,Function fn,Object scope)
			 * title:标题
			 * msg:提示信息
			 * fn:提示框关闭后自动调用的函数
			 * scope:作用域
			 */
			Ext.MessageBox.confirm("确认框","请点击下面的按钮做出选择",function(button){
				Ext.MessageBox.alert("提示框","你点击的按钮是"+button);
			})
		});
  	</script>

4.自定义对话框：

Ext.onReady(function (){
	/**
	 * Ext.MessageBox.show(Object config);
	 * config可以使用json格式可以传输很多信息到方法中,config中常见属性如下：
	 * title：标题
	 * msg：信息内容
	 * width：消息框的宽度
	 * multiline：是否显示多行文本
	 * closable：是否显示关闭按钮
	 * buttons：按钮
	 * icon：图标
	 * fn：回调函数
	 */
	var config={
		title:"自定义对话框",
		msg:"这是一个自定对话框",
		width:400,
		multiline:true,
		closable:true,
		buttons:Ext.MessageBox.YESNOCANCEL,
		icon:Ext.MessageBox.QUESTION,
		fn:function(button,text){
			Ext.MessageBox.alert("提示框","你点击的按钮是"+button+"<br>输入的值是"+text);
		}
	}
	Ext.MessageBox.show(config);
});

5.进度条

Ext.onReady(function (){
	var config={
		title:"请等待",
		msg:"正在加载项目...",
		progressText:"正在初始化...",
		width:300,
		progress:true//此属性证明这是一个进度条
	};
	Ext.MessageBox.show(config);
	var f=function(v){
		return function(){
			if(v==12){
				Ext.MessageBox.hide();
				Ext.MessageBox.alert("完成","完成所有的项目加载!");
			}else{
				var i=v/11;
				Ext.MessageBox.updateProgress(i,Math.round(100*i)+"%已完成");
			}
		}
	};
	for(var i=0;i<13;i++){
		setTimeout(f(i),i*500);
	}
});

6.弹出框动画效果

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=basePath%>ext/resources/css/ext-all.css" />
 	<script type="text/javascript" src="<%=basePath%>ext/adapter/ext/ext-base.js"></script>
         <script type="text/javascript" src="<%=basePath%>ext/ext-all.js"></script>
  	<script type="text/javascript">
 		var extjsAnimal = function(){
			var config={
				title:"飞出的消息框",
				msg:"这是一个自定义对话框",
				width:400,
				multiline:true,
				closable:false,
				buttons:Ext.MessageBox.YESNOCANCEL,
				icon:Ext.MessageBox.QUESTION,
				animEl:"fly"
			};
			Ext.MessageBox.show(config);
		}
  	</script>
  </head>
  <body>
  	<input type="button" value="Animal" id="fly" οnclick="extjsAnimal();"/> 	
  </body>
</html>

bzuld

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
extjs学习笔记-----消息框002

1.提示框<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> ext/resources/css/ext-al
复制链接

扫一扫