学习EXTJS6(5)基本功能-进度条组件
2024-08-30 16:38:23
Ext.ProgressBar有二种模式:手动和自动;
手动:自己控制显示、进度、更新、清除。自动只需要调用Wait方法即可。
配置项:
配置项 | 类型 | 说明 |
renderTo | String | 指定页面上已经存在的元素or元素id,该元素成为新组件的容器 |
height | Number | |
width | Bunber | |
cls | String | 一个可选的样式表扩展常用于自定义式样。默认是空 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../study/EXTJS/ext-4.2.1.883/resources/css/ext-all.css" />
<script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/bootstrap.js"></script>
<script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script> </head>
<body>
<script type="text/javascript">
function autoProgress()
{
var config = {
text:'working...',
width:300,
renderTo:'autoProgressBar'
} var progressBar = new Ext.ProgressBar(config); config = {
duration:10000, //进度条将持续显示10s
interval:1000, //进度条将每1s更新一次
increment:11, //进度条分11次更新完毕
scope:this, //回调函数执行范围
fn:function(){ //跟新完毕后调用回调函数
progressBar.hide();
Ext.MessageBox.alert('提示','跟新完毕!');
//alert("更新完毕!");
}
} progressBar.wait(config); </script>
<a href="javascript:autoProgress();" mce_href="javascript:autoProgress();">自动模式进度条(适合无法准确掌握时间)</a>
<div id="autoProgressBar">autoProgress</div>
</body>
</html>
自动进度条
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../study/EXTJS/ext-4.2.1.883/resources/css/ext-all.css" />
<script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/bootstrap.js"></script>
<script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
function handMoveProgress()
{
var config = {
text:'working...',
width:300,
renderTo:'handProgressBar'
} var progressBar = new Ext.ProgressBar(config); var count = 0;
var percentage = 0;
var progressText = ''; config = {
run:function(){
count++; if(count > 10)
{
progressBar.hide();
Ext.TaskMgr.stopAll(); //终止定时调用^-^
return;
} percentage = count/10;
progressText = percentage*100 + '%'; progressBar.updateProgress(percentage,progressText);
},
interval:5000
} Ext.TaskMgr.start(config);
} </script>
</head>
<body>
<a href="javascript:handMoveProgress();" mce_href="javascript:onReady();">手工模式进度条(适合可以掌握执行状态)</a>
<div id="handProgressBar">handMoveProgress</div>
</body>
</html>
手动进度条
书上的没有调试通,查看网上demo,tmd也没有看到效果。有时间再体会。
最新文章
- rsa密钥文件转化为tortoise认可的pak密钥文件
- 网页下载Google Play 的App
- SendMessage
- [Linux] 孤儿进程与僵尸进程[总结]
- 【原】web页面登陆验证
- FTP服务器中文环境引起润日下载不了附件问题解析
- Activiti 使用自己的身份认证服务
- C# 验证识别基类
- PhotoSwipe简介
- 在Java 线程中返回值的用法
- bzoj 4826: [Hnoi2017]影魔 [主席树 单调栈]
- [LNOI 2014]LCA
- redis缓存清除
- shell 生成目录的树状视图、生成文件及子目录的汇总信息
- 简易祖玛--canvas
- Android BLE dfu升级
- split 分割 字符串(分隔符如:* ^ : | , .)
- 浙江财经大学第十五届大学生程序设计竞赛------B 烦恼先生打麻将
- SQL语句,表中的列字段字符串合并 和 字符串拆分成表
- golang sqlite3 CRUD
热门文章
- 通过指针访问C++对象的私有成员
- C# 你什么让程序员寂寞成酱紫 (男生版 娱乐中学习 抽象类 接口 继承 实现方法 )
- warning: here-document at line 7 delimited by end-of-file (wanted `rui&#39;)
- C语言程序读写文件(文件内存一个十进制数,每读一次数值加一)
- selenium3 + python - alert_is_present定位
- C# 取两位小数
- Oracle 12.2.0.1 RAC for rhel 7.X 数据库安装(节点1执行root.sh失败)
- iOS 点击事件传递及响应
- C99C新增内容
- BZOJ 2431 逆序对数列 DP