Ext秒表
显示分和秒
js
Ext.define('xy.StopWatchWindow', {
extend: 'Ext.window.Window',
width: 300,
modal: true,
close:'hide',
layout: {
type: 'vbox',
align: 'stretch'
},
initComponent: function() {
var me = this;
me.store = Ext.create('Ext.data.Store',{
fields:['time']
});
me.grid = Ext.create('Ext.grid.Panel', {
emptyText: 'No Data',
height:300,
scrollable: 'y',
store:me.store,
columns :[{
text: 'Time',
dataIndex: 'time',
width: 240,
flex:1
},{
xtype: 'actioncolumn',
text: 'Delete',
align:'center',
items: [
{
getClass: function(v, metadata, record) {
return 'icon-delete'
},
scope: me,
handler: me.deleteTime
}
]
}]
});
this.items = [
{
html:'00:00',
height:40,
cls:'time-count-display',
itemId:'timeCountDisplay'
},
{
xtype:'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[{
xtype: 'button',
flex:1,
text : 'Reset',
name:'restBtn',
handler: this.onResetClick,
disabled:true,
scope: me
},
{
xtype: 'button',
flex:1,
text : 'Start',
name:'startBtn',
action:'start',
handler: this.onStratClick,
scope: me
}]
},
me.grid];
me.countStartTime = null;
me.countDuration = 0;
me.changeTime = null;
me.countTime = 0;
this.callParent(arguments);
},
onStratClick : function(btn){
var me = this;
if(btn.action == 'start'){
me.countStartTime = new Date();
me.changeTime = setInterval(me.changeStopWatch.bind(me),1000);
btn.action = 'stop';
btn.setText('Stop');
me.down('button[name="restBtn"]').setDisabled(false);
}else{
clearInterval(me.changeTime);
me.countDuration = me.countTime;
btn.action ='start';
btn.setText('Start');
me.down('button[name="restBtn"]').setDisabled(true);
}
},
onResetClick : function (){
var me = this;
me.store.add({time:me.secondToTime(me.countTime)});
clearInterval(me.changeTime);
me.countStartTime = new Date();
me.countDuration = 0;
me.countTime = 0;
me.getComponent('timeCountDisplay').setHtml('00:00');
me.down('button[name="restBtn"]').setDisabled(true);
var startBtn = me.down('button[name="startBtn"]');
startBtn.action = 'start';
startBtn.setText('Start');
},
deleteTime:function(grid, rowIndex, colIndex, item, e, record){
var me = this;
me.store.remove(record);
},
changeStopWatch : function(){
var me = this;
var now = new Date();
var tempCount = (now.getTime() - me.countStartTime.getTime())/1000 + me.countDuration;
tempCount = Math.floor(tempCount * 100) / 100;
me.countTime = tempCount;
me.getComponent('timeCountDisplay').setHtml(me.secondToTime(tempCount));
},
secondToTime:function(time) {
var result = "";
if (null != time && "" != time && time > 0) {
//min
if (time >= 60) {
var tempMin = parseInt(time/ 60) ;
if(tempMin < 10){
tempMin = "0" + tempMin + ":";
}else{
tempMin = tempMin + ":"
}
result = result + tempMin;
}else{
result = result + "00:";
}
//second
var timeStr = time + "";
var tempSecond = parseInt(time%60);
if(tempSecond < 10){
tempSecond = "0" + tempSecond;
}
result = result + tempSecond;
}else{
result = "00:00";
}
return result;
}
});
css
.time-count-display{
text-align: center;
}
.time-count-display .x-autocontainer-innerCt {
vertical-align: middle;
font-size: 25px;
}
.icon-delete {
background-image: url(../imgs/delete.png);
}