ExtJs2.0学习系列(1)--Ext.MessageBox -程序员宅基地

技术标签: EXT  ext2.x  F#  

大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个系列的文章。
个人认为用extjs做后台很不错,布局比较完美!
1.Ext.MessageBox.alert()方法
有四个参数,为简单起见,主要介绍前面三个参数:
alert( title , msg , function(){} )
其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发。
Ext.MessageBox.alert("title","msg");
Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹出!")});
2.Ext.MessageBox.confirm()方法
基本上同alert()方法一模一样。
注意这点: Ext.MessageBox.confirm("title","msg",function(e){alert(e);});这个参数e是什么?它是你点击的弹出框的按钮的值,三种值:yes,no,cancel.Alert()方法也是如此,不过只有两种值:ok,cancel.

3.Ext.MessageBox.prompt()方法
有六个参数,比前面alert方法多一个返回值和是否多行。 Ext.MessageBox.prompt("title","msg");
Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);});
//输入"qianxudetianxia",点击ok按钮,弹出ok-qianxudetianxia
Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);},this,true);
//true为多行,this表示作用域
4.Ext.MessageBox.show()方法
功能很强大,采用config配置形式,比前面的方法使用更方便。
参数很多,在此列举最常用的配置参数:
1.animEl:对话框弹出和关闭时的动画效果,比如设置为“id1”,则从id1处弹出并产生动画,收缩则相反
2.buttons:弹出框按钮的设置,主要有以下几种:Ext.Msg.OK,
Ext.Msg.OKCANCEL,
Ext.Msg.CANCEL,
Ext.Msg.YESNO,
Ext.Msg.YESNOCANCEL
你也可以自定义按钮上面的字:{"ok","我本来是ok的"}。
若设为false,则不显示任何按钮.
3.closable:如果为false,则不显示右上角的小叉叉,默认为true。
4.msg:"消息的内容"
5.title:"标题"
6.fn:关闭弹出框后执行的函数
7.icon:弹出框内容前面的图标,取值为Ext.MessageBox.INFO,
Ext.MessageBox.ERROR,
Ext.MessageBox.WARNING,
Ext.MessageBox.QUESTION
8.width:弹出框的宽度,不带单位
9.prompt:设为true,则弹出框带有输入框
10.multiline:设为true,则弹出框带有多行输入框
11.progress:设为true,显示进度条,(但是是死的)
12.progressText:显示在进度条上的字
13.wait:设为true,动态显示progress
14.waitConfig:配置参数,以控制显示progressexample:
Ext.MessageBox.show({
title:"标题",
msg:"内容的消息",
buttons:{"ok":"我不再显示OK了"},
fn:function(e){alert(e);},
animEl:"test1",
width:500,
icon:Ext.MessageBox.INFO,
closable:false,
progress:true,
wait:true,
progressText:"进度条"
// prompt:true
// multiline:true
});
4.Ext.MessageBox.show()中的进度条的使用
首先必须知道例外两个方法 Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数,看名字就知道意思),
注意value为0-1之间的数,表示进度条的进度.
第一种:(通过进度的大小控制进度,满进度为1) Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:"df",
msg:"dfd",
progress:true,
width:300,
closable:true
});
var f=function(v){
return function(){
if(v==12)
{
Ext.MessageBox.hide();
//alert("加载完成!");
}
else
{
var i=v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+"% completed",i);
}
}
}
for(var i=1;i<13;i++)
{
setTimeout(f(i),i*500);//从点击时就开始计时,所以500*i表示每500ms就执行一次
}
}
);
第二种:(通过固定时间控制进度加载)
Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:"时间进度条",
msg:"5s后关闭进度框",
progress:true,
width:300,
wait:true,
waitConfig:{interval:600},//0.6s进度条自动加载一定长度
closable:true
});
setTimeout(function(){Ext.MessageBox.hide()},5000);//5后执行关闭窗口函数
}
最后关于那个waitConfig的参数,在此说明下:
1.interval:进度的频率
2.duration:执行进度的持续时间,超过这个时间后,interval失效,不再产生进度效果,但进度狂也不会消失。
3.fn:duration的时间到后执行的函数
所以,上面的通过时间控制进度另外一种写法为:
Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:"时间进度条",
msg:"5s后关闭进度框",
progress:true,
width:300,
wait:true,
waitConfig:{
interval:600,
duration:5000,
fn:function(){
Ext.MessageBox.hide();//让进度条消失
}},
closable:true
});
//setTimeout(function(){Ext.MessageBox.hide()},5000);
}
);
效果一样。
MessageBox类暂且就说这么多!一起期待下一章...
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhaohanjiangit/article/details/83392284

智能推荐

linux 清空docker容器日志_linux清理docker容器log-程序员宅基地

文章浏览阅读221次。【代码】linux 清空docker容器日志。_linux清理docker容器log

青岛大学开源OJ平台搭建_github oj开源-程序员宅基地

文章浏览阅读7.3k次,点赞3次,收藏15次。源码地址为:https://github.com/QingdaoU/OnlineJudge可参考的文档为:https://github.com/QingdaoU/OnlineJudgeDeploy/tree/2.0一、安装所依赖的环境sudo apt-get update && sudo apt-get install -y vim python-pip curl g..._github oj开源

浅谈数据安全-程序员宅基地

文章浏览阅读4.4k次。在《网络安全法》中,虽然已经明确了要求保障网络数据的完整性、保密性、可用性的能力,但随着近些年数据安全热点事件的出现,如数据泄露事件、个人信息滥用事件。表明对数据保护的要求仅依赖《网络安全法》中的几款条例是不足以支撑的。因此2021年9月1日《中华人民共和国数据安全法》便正式诞生,从此数据安全也被推上了风口浪尖。那么数据安全如何定义?与传统网络安全有何区别?数据安全体系又应该如何建立?..._数据安全

Leetcode 第338,342,344,345,367,389,392,404,405,409题(Java解法)-程序员宅基地

文章浏览阅读194次。Java解leetcode,助力面试之简单10道题(五)第338题 比特位计数解题思路代码第342题 4的幂解题思路代码第344题 反转字符串解题思路代码第345题 反转字符串中的元音字母解题思路代码第367题 有效的完全平方数解题思路代码第389题 找不同解题思路代码第392题 判断子序列解题思路代码第404题 左叶子之和解题思路代码第405题 数字转换为十六进制数解题思路代码第409题 最长回文串解题思路代码第338题 比特位计数示例 1:输入输出[3,2,3]3示例

C++ 学习笔记(对双端队列进行封装,实现数据生产者消费者)-程序员宅基地

文章浏览阅读698次。#pragma once #include <deque>#include <condition_variable>template <typename T>class MsgList { public: void add(const T& msg) { std::unique_lock<std::mutex> lock(mutex); queue.

python水表识别图像识别深度学习 CNN_水表 深度学习 识别-程序员宅基地

文章浏览阅读551次,点赞8次,收藏8次。重点:项目和文档是本人近期原创所作!程序可以将水表图片里面的数据进行深度学习,提取相关信息训练,lw1.3万字重复15%,可以直接上交那种!具体和看下面的目录。python水表识别,图像识别深度学习 CNN,Opencv,Keras。_水表 深度学习 识别

随便推点

问题记录——正则表达式匹配控制符_正则表达式匹配控制字符-程序员宅基地

文章浏览阅读910次。问题前端用xterm.js通过websocket连接docker虚拟终端,返回的字符中包括如下字符串,其中有两个控制字符,“ESC"和"BEL” ,想通过正则表达式匹配这一段字符,然后去掉这段字符:参考文档控制字符编码表转义符对照表通过上面查询得知,"ESC"和"BEL"这两个控制符的ASCII码分别为:十进制为27和7,十六进制为0x1B和0x07,转义符分别为:\e和\a代码**注意:**直接使用ASCII码匹配是不行的,一定要用转义符才行。如下测试代码中,只有regex3才能匹_正则表达式匹配控制字符

Android RIL框架分析-程序员宅基地

文章浏览阅读1.5k次。1.RIL框架 RIL,Radio Interface Layer。本层为一个协议转换层,提供Android Telephony与无线通信设备之间的抽象层。 Android RIL位于Telephony Frameworks之下,Modem之上的,根据源码,RIL可以分为两个部分:Frameworks 框架层中的java程序,简称RILJ。HAL层中C/C++程序,简称RILC,RILC具体的又包括LibRIL、Rild和Reference-RIL这三个部分。 Andr..._ril框架

Python编程基础:第六节 math包的基础使用Math Functions_ps math function-程序员宅基地

文章浏览阅读565次。第六节 math包的基础使用前言实践前言我们通常会对数值型变量进行计算,这里我们给出一些常用的函数用于辅助你的计算过程。常用的数学计算函数均在math包。实践首先我们导入math包,并定义一个浮点型变量pi将其赋值为3.14:import mathpi = 3.14如果我们需要计算浮点型变量四舍五入后的计算结果,用函数round()即可:print(round(pi))>>> 3如果我们需要向上取整,那就需要函数math.ceil():print(math.cei_ps math function

canal异常 Could not find first log file name in binary log index file_canal could not find first log file name in binary-程序员宅基地

文章浏览阅读4.4k次,点赞3次,收藏2次。Could not find first log file name in binary log index file问题解决解决过程问题最近在使用canal来监测数据库的变化,处理变动的数据。由于有一段时间没有用了,这次启动在日志文件中看到这个异常 Could not find first log file name in binary log index file,详细信息如下:2020-12-16 19:14:42.053 [destination = tradeAndRefund , addr_canal could not find first log file name in binary log index file

【练习】生成10个1到20之间的不重复的随机数并降序输出-程序员宅基地

文章浏览阅读960次。分析:1.创建一个Random对象;2.创建一个hashset的集合对象;3.循环生成10个1-20的随机数4.输出。package edu.xalead;import java.util.*;public class Test { public static void main(String[] args) { Random r...

linux系统扩展名大全,Linux系统文件扩展名学习-程序员宅基地

文章浏览阅读3.2k次。Linux系统下的扩展名并不能标识该文件是属于哪一种类型的文件。文件是否可以执行等都跟文件的扩展名无关。因为文件script没有执行权限,所以也就无法执行,sh-3.2# touch ./scriptsh-3.2# ls -lh ./script-rw-r--r-- 1 root root 0 Dec 28 06:15 ./scriptsh-3.2#sh-3.2# ./scriptsh: /scr..._linux的扩展名

推荐文章

热门文章

相关标签