LeetCode: Jump Game II [044]

1. 用css、HTML布局那个界面
2. 用javascript的事件委托监听那个按钮的父节点的点击事件

ContactTelPanel =Ext.extend(Ext.Panel, {
	//构造方法
	constructor : function(config) {
		Ext.apply(this, config);//直接把config对象的属性全复制到this对象中
		Parent = this.parent;
		var me = this;
		ContactTelPanel.superclass.constructor.call(this, {//用ContactTelPanel的父类也就是Ext.Panel的构造函数
			autoScroll : true,
			title : "拨打电话",//设置title，跟这篇文章的主体没关系，不要管他
			id : "contacttelpanel",
			bodyStyle : "padding: 30px 300px;",
			defaults : {//可以为该对象(ContactTelPanel)包含的组件(也就是在items配置选项)设置一些相同属性
				layout : "column",
				defaults : {
					xtype : "button",
					width : 50,
					height : 25,
					style : "margin:4px 15px",
					handler : this.press //为每个按钮都添加一个click的事件
				},
				bodyBorder : false
			},
			items : [ {//textfield组件
				height : 30,
				width : 250,
				xtype : "textfield",
				id : "tf",
				style : "margin-bottom:10px"
			}, {// 没有xtype就是默认为panel，下面也是，不然就不要纠结了，直接在这里想象成第一行按钮1、按钮2、按钮3
				items : [ {
					text : "1"
				}, {
					text : "2"
				}, {
					text : "3"
				} ]
			}, {// 这里是按钮4、按钮5、按钮6

				items : [ {
					text : "4"
				}, {
					text : "5"
				}, {
					text : "6"
				} ]
			}, {// 这里是按钮7、按钮8、按钮9 下同
				items : [ {
					text : "7"
				}, {
					text : "8"
				}, {
					text : "9"
				} ]
			}, {
				items : [ {
					text : "*"
				}, {
					text : "0"
				}, {
					text : "#"
				} ]
			}, {
				items : [ {
					text : "拨打",
				}, {
					text : "删除",
				} ]
			} ]
		});
	},
	press : function() {
		var text = this.text, textfield = Ext.getDom("tf");
		if (/[0-9*#]/.test(text)) {//在textfield中显示所点击按钮的数字
			textfield.value += text;
		} else if (this.text == "删除") {//删除功能
			textfield.value = textfield.value.slice(0, -1);
		} else if (this.text == "拨打") {//这个先不要管他
			Tel.telcall(textfield.value);
		}
	}

});

注：其实从上面可以知道ContactTelPanel是继承Ext.Panel，然后这个面板中有很多个键，每个键都监听click事件。确实在这里觉得自己敲得不是很好，应该是用事件委托来实现，因为你每个按钮都监听了click事件，太影响效率了。用事件委托我们可以指监听它的父节点的click事件就行了，然后根据事件流来判断目的对象并操作。本文重点还是监听事件里面handler : this.press这段代码中 。我遇见的问题就是如果我在press函数要用到这个类ContactTelPanel的一些属性，怎么办？