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

	}