ext的oop

使用Ext创建一个js对象。

charset = 'utf-8';
Ext.namespace("general.athena.model");

general.athena.model.Person = Ext.emptyFn;
Ext.apply(general.athena.model.Person.prototype, {
	//在prototype里面定义了的属性，是js对象的实例属性（和对象）
	//如果直接使用Person.print 那么这个属性就是一个静态的方法
	name : "",
	sex : "",
	job : "无",
	print : function() {
		/*
		 * Ext.MessageBox.alert("print", String.format("姓名:{0},性别:{1}",
		 * this.name, this.sex));
		 */
		alert(String.format("姓名:{0},性别:{1},工作:{2}", this.name, this.sex,this.job));
	}
});

这里使用Ext.emptyFn来创建一个js的Person对象，在使用Ext.apply()函数来给Person的prototype，这些属性（方法）是Person的实例属性。

Ext的OOP的构造函数和静态方法

//Ext 的构造方法
general.athena.model.Person1 = function(cfg){
	Ext.apply(this,cfg);
};

general.athena.model.Person1.print = function(name,sex){
//	var person = new general.athena.model.Person1({name:name,sex:sex});
//	person.print();
	alert("静态方法");
};

Ext.apply(general.athena.model.Person1.prototype,{
	print:function(){
		alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
	}
});

ExtOOP的继承

charset = 'utf-8';
Ext.namespace('general.athena.model');

// 构造函数
general.athena.model.Student = function(cfg) {
	Ext.apply(this, cfg);
};

Ext.extend(general.athena.model.Student, general.athena.model.Person, {
	job : '学生'
});

上面的Student类是继承了Person类，那么他就有Person类的print实例方法。
测试方法

		var person = new general.athena.model.Person();
		person.name = "XXX";
		person.sex = "男";
		person.print();

		person.name = "天上人间";
		person.sex = "不难不女";
		person.print();

		general.athena.model.Person1.print();
		var person1 = new general.athena.model.Person1({
			name : "XXX",
			sex : "男"
		});
		person1.print();

		var student = new general.athena.model.Student({
			name : 'XXX',
			sex : '男'
		});
		student.print();

自定义Ext类。

		LoginWindow = Ext.extend(Ext.Window, {
			id:'loginWindow',
			title : '登录系统',
			width : 265,
			height : 140,
			collapsible : true,
			draggable : false,
			resizable : false,
			plain:true,
			defaults : {
				border : false
			},
			buttonAlign : 'center',
			createFormPanel : function() {
				return new Ext.form.FormPanel({
					bodyStyle : 'padding-top:6px',
					defaultType : 'textfield',
					labelAlign : 'right',
					labelWidth : 55,
					labelPad : 0,
					frame : true,
					defaults : {
						allowBlank : false,
						width : 158
					},
					items : [ {
						cls : 'user',
						name : 'userName',
						fieldLabel : '帐号',
						blankText : '帐号不能为空'
					}, {
						cls : 'key',
						name : 'password',
						fieldLabel : '密码',
						blankText : '密码不能为空',
						inputType : 'password'

					} ]
				});
			},
			login : function() {
				if (this.fp.form.isValid()) {
					this.fp.form.submit({
						waitTitle : '请稍候',
						waitMsg : '正在登录......',
						url : 'user/login!doLogin',
						success : function(form, action) {
							window.location.href = 'main.jsp';
						},
						failure : function(form, action) {
							form.reset();
							Ext.Msg.alert('警告', action.result.data);
						}
					});
				}
			},
			keys : new Ext.KeyMap(this, {
				key : 13,
				fn : function() {
					if (Ext.getCmp('loginWindow').fp.form.isValid()) {
						Ext.getCmp('loginWindow').fp.form.submit({
							waitTitle : '请稍候',
							waitMsg : '正在登录......',
							url : 'user/login!doLogin',
							success : function(form, action) {
								window.location.href = 'main.jsp';
							},
							failure : function(form, action) {
								form.reset();
								Ext.Msg.alert('警告', action.result.data);
							}
						});
					}
				},
				scope : this
			}),
			initComponent : function() {
				LoginWindow.superclass.initComponent.call(this);
				this.fp = this.createFormPanel();
				this.add(this.fp);
				this.addButton('登录', this.login, this);
				this.addButton('重置', function() {
					this.fp.form.reset();
				}, this);
			}
		});

上面的代码是网上的例子，我改了一点点地方，发现一个问题这里记录一下。


上图中的Ext.getCmp('loginWindow')是我自己添加的。第一次添加的是Ext.get('loginWindow')。结果是错误的。我猜原因是这样的，给自定义对象添加的任何属性都属于Compnent的属性，而非Element的属性。所以在不到。