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); }