Skip to content

Instantly share code, notes, and snippets.

@huanle0610

huanle0610/progressbar.html

Created September 11, 2014 02:04
Show Gist options
  • Save huanle0610/bb629eb2c85b5b2d5a09 to your computer and use it in GitHub Desktop.
Save huanle0610/bb629eb2c85b5b2d5a09 to your computer and use it in GitHub Desktop.
Download ZIP
Extjs4.2 Progressbar Multi-segment
Raw
progressbar.html
<html>
<head>
<meta charset="UTF-8">
<title>Extjs4.2 Progressbar Multi-segment</title>
<link rel="stylesheet"
href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/ext-theme-neptune/ext-theme-neptune-all.css"/>
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-theme-neptune.js"></script>
<style type="text/css">
#pb{
margin: 70px auto auto 100px;
}
.x-progress-red .x-progress-bar {
border-right-color: #FF0000;
border-top-color: #FF0000;
background-image: none;
background-color: #FF0000;
}
.x-progress-orange .x-progress-bar {
border-right-color: #ff7716;
border-top-color: #ff7716;
background-image: none;
background-color: #ff7716;
}
.x-progress-blue .x-progress-bar {
border-right-color: #0000FF;
border-top-color: #0000FF;
background-image: none;
background-color: #0000FF;
}
.x-progress-green .x-progress-bar {
border-right-color: #2c8b12;
border-top-color: #2c8b12;
background-image: none;
background-color: #2c8b12;
}
.x-progress-red,
.x-progress-orange,
.x-progress-green,
.x-progress-blue {
border: 1px solid rgb(90, 119, 46);
background-color: #f1f1f1;
}
.x-progress-orange .x-progress-text,
.x-progress-red .x-progress-text,
.x-progress-green .x-progress-text,
.x-progress-blue .x-progress-text {
color: white;
font-weight: bold;
font-size: 11px;
text-align: left;
text-indent: 2px;
line-height: 18px;
}
</style>
<script type="text/javascript">
Ext.define("Ext.ux.SegmentProgressBar", {
extend: 'Ext.ProgressBar',
alias: 'widget.segmentprogressbar',
width: 300,
height: 20,
updateFn: null,
initComponent: function () {
var me = this;
me.updateFn = me.updateFn || function (bar, value, text) {
if (value < 0.5) {
bar.setUI('green');
} else if (value < 0.8) {
bar.setUI('blue');
} else if (value < 0.9) {
bar.setUI('orange');
} else {
bar.setUI('red');
}
};
me.listeners = {
render: function (bar) {
var height = bar.bar.parent().getHeight(true); // content height
bar.bar.setStyle('height', height + 'px');
bar.textEl.setStyle('height', height + 'px');
bar.textEl.setStyle('line-height', height + 'px');
if (this.initValue) {
this.updateProgress(this.initValue, this.text);
}
},
update: me.updateFn
};
me.callParent(arguments);
}
});
Ext.onReady(function () {
var p = Ext.createWidget('segmentprogressbar', {
color: "#4D0099",
renderTo: 'pb',
initValue: .9,
text: 'ok',
// updateFn: function(bar, value, text){
// if(text == 'ok') {
// bar.setUI('green');
// }
// },
height: 45,
width: 510
});
var count = 0;
Ext.TaskManager.start({
run: function () {
count++;
//刷新10次后关闭进度条
if (count > 10) {
Ext.TaskManager.stop();
}
p.updateProgress(count / 10, count == 10 ? 'ok' : (count * 10 + '%'), true);
},
interval: 1000 //每秒更新
});
});
</script>
</head>
<body>
<div id="pb"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment