Signature Drawing Canvas Panel in Sencha Touch

sencha-touch-signature.js

(function() {

	var clicked, canvas, ctx, coords, offsetX, offsetY, oldX, oldY;
	
	app.views.Signature = Ext.extend(Ext.Panel, {
		layout: {
			type: 'vbox',
			pack: "center",
			align: "center"
		},
		items: [{
			scroll: false,
			html: "<canvas width='500' id='canvas' height='100'/>"
		}, {
			xtype: 'button',
			text: 'Submit',
			handler: function(b, e) {
				var img = canvas.toDataURL();
				Ext.Ajax.request({
					url: 'img.php',
					method: 'POST',
					params: {
						img: img
					}
				});
			}
		}],
		scroll: false,
		listeners: {
			activate: function() {
				setupCanvas();
				canvas.ontouchmove = handleMove;
				canvas.onmousemove = handleMouseMove;
			}
		}
	});
		
	window.onmousedown = function() {
		clicked = true;
	}
	
	window.onmouseup = function() {
		oldX = oldY = clicked = false;
	}
	
	window.ontouchend = function() {
		oldX = oldY = clicked = false;
	}

	function handleMouseMove(e) {
		var x = e.offsetX,
			y = e.offsetY;
		if (clicked) drawCircle(x, y);			
	}

	function handleMove(e) {
		var x, y, i;
		for (i = 0; i < e.targetTouches.length; i++) {
			x = e.targetTouches[i].clientX - offsetX;
			y = e.targetTouches[i].clientY - offsetY;
			drawCircle(x, y);
		}
	}
	
	function setupCanvas() {
		canvas = document.getElementById('canvas');
		ctx = canvas.getContext("2d");
		coords = getCumulativeOffset(canvas);
		offsetX = coords.x;
		offsetY = coords.y;
		drawBg(ctx);
	}
	
	function drawBg() {
		ctx.beginPath();
		ctx.moveTo(0, 75);
		ctx.lineTo(500, 75);
		ctx.stroke();
		ctx.font = "36pt Arial";
		ctx.fillStyle = "rgb(180,33,33)";
		ctx.fillText("X", 10, 75);
	}
	
	function drawCircle(x, y) {
		ctx.strokeStyle = "rgb(55,55,255)";
		ctx.beginPath();
		if (oldX && oldY) {
	 		ctx.moveTo(oldX, oldY);
	 		ctx.lineTo(x, y);
	 		ctx.stroke();
			ctx.closePath();
		}
		oldX = x;
		oldY = y;
	}
	
        // see: http://stackoverflow.com/questions/160144/find-x-y-of-an-html-element-with-javascript
 	function getCumulativeOffset(obj) {
	    var left, top;
	    left = top = 0;
	    if (obj.offsetParent) {
	        do {
	            left += obj.offsetLeft;
	            top  += obj.offsetTop;
	        } while (obj = obj.offsetParent);
	    }
	    return {
	        x : left,
	        y : top
	    };
	};
	
})();

can you please explain fully i tried to write the above code in launch function but it didn't work.
I' am new to sencha touch can you please help.