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

来源：互联网发布：氨基转换作用实验数据编辑：程序博客网时间：2024/05/17 22:00

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" onclick="extjsAnimal();"/>   </body></html>