<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--Ext js(4.0)官方下载的样式代码库-->
<link href="../ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<!--Ext js(4.0)官方下载的代码库-->
<script src="../ExtJs/ext-all.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var v = 0;
function moveForwave() {
v = v + 0.01; //频率为每次0.01
if (v >= 1) {
Ext.getCmp("pgbTest").updateProgress(v, "成功更新", true); //成功更新
return;
} else {
Ext.getCmp("pgbTest").updateProgress(v, "更新中...", true);//正在更新中
}
setTimeout(moveForwave,100); //重复调用此方法
}
Ext.onReady(function () {
var w = new Ext.Window({
height: 400,
width: 600,
title: "进度条控件",
items: [
{
xtype: "progressbar", //进度条控件
width: 300,
text: "更新中...",
id: "pgbTest"
}
],
bbar: [
{
xtype: "button",
text: "启动进度条",
handler: function () {
moveForwave(); //调用方法
}
}
]
});
w.show();
});
</script>
</head>
<body>
</body>
</html>
预览效果如下: