慢慢按书上的作。
<!DOCTYPE html>
<html>
<head>
<title>ExtJs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<STYLE TYPE="text/css">
.cutom .x-progress-inner {
height: 17px;
background: #fff;
}
.custom .x-progress-bar {
height: 15px;
background: transparent url("http://127.0.0.1:8000/ExtJs/exclamation.gif") repeat-x 0 0;
border-top: 1px solid #BEBEBE;
border-bottom: 1px solid #EFEFEF;
border-right: 0;
}
</STYLE>
<script type="text/javascript">
Ext.onReady(function(){
/*
var ProgressBar = new Ext.ProgressBar({
width: 300,
renderTo: 'ProgressBar'
});
var count = 0;
var percentage = 0;
var progressText = '';
Ext.TaskManager.start({
run:function(){
count++;
if(count>10) {
ProgressBar.hide();
}
percentage = count/10;
progressText = percentage * 100 + '%';
ProgressBar.updateProgress(percentage, progressText, true);
},
interval: 1000,
repeat: 6
});*/
var ProgressBar = new Ext.ProgressBar({
text: 'working....',
width: 300,
renderTo: 'ProgressBar',
cls: 'custom'
});
ProgressBar.wait({
duration: 10000,
interval: 1000,
increment: 10,
text: 'wating',
scope: this,
fn: function() {
alert('update finish!');
}
});
});
</script>
</head>
<body>
<div id='ProgressBar'></div>
</body>
</html>
