Ext秒表

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