类的定义

Sencha Touch有自己的类定义方式,我们先来看个例子:

	Ext.define('Animal', {
        config: {
            name: null
        },
     
        constructor: function(config) {
            this.initConfig(config);
        },
     
        speak: function() {
            alert('grunt');
        }
    });

上面我们简单地定义了一个Animal类,只有一个name属性和一个方法speak();

类的继承

	Ext.define('Human', {
	    extend: 'Animal',
	 
	    speak: function() {
	        alert(this.getName());
	    }
	});

我们定义了一个Human类继承自Animal,并重写speak()方法。

类的实例化

	var bob = Ext.create('Human', {
		name: 'Bob'
    });
 
	bob.speak(); //alerts 'Bob'

通过Ext.create()静态方法创建类实例。

getter和setter方法

对应的属性会自动生成getter和setter方法,如上面继承的例子中的this.getName(),setter方法为:this.setName('')。

	Ext.define('Human', {
	    extend: 'Animal',
	 
	    applyName: function(newName, oldName) {
	        return confirm('Are you sure you want to change name to ' + newName + '?')? newName : oldName;
	    }
	});

applyName()方法是在调用setter方法后自动回调的方法,上面例子将在调用setter方法后弹出确认窗口询问是否修改name的值,点击no的话则不进行修改。

	Ext.define('Human', {
	    extend: 'Animal',
	 
	    updateName: function(newName, oldName) {
	        alert('Name changed. New name is: ' + newName);
	    }
	});

updateName()方法则是在调用setter方法后并且改属性值已经修改了的情况下自动回调的。

依赖和动态加载

有时候我们需要在类里面使用某个类的,这时候我们需要加入这个类的引用声明:requires: 'Ext.MessageBox'。

	Ext.define('Human', {
	    extend: 'Animal',
	 
	    requires: 'Ext.MessageBox',
	 
	    speak: function() {
	        Ext.Msg.alert(this.getName(), "Speaks...");
	    }
	});

加入引用声明后,Sencha Touch会自动判断是否Ext.MessageBox已经加载,如果未加载的话则会自动通过AJAX加载对应的类文件。

命名空间

以上一篇文章的Main.js文件为例

	Ext.define('HelloSenCha.view.Main', {
	    extend: 'Ext.navigation.View',
	    xtype: 'mainview',
	
	    requires: [
	        'HelloSenCha.view.Contacts',
	        'HelloSenCha.view.contact.Show',
	        'HelloSenCha.view.contact.Edit'
	    ],
	...

类名规则为:项目名称.目录1.目录2...类名,也就是说,Main.js和Contacts.js文件在view文件夹下,Show.js和Edit.js在view/contact文件夹下。