EXT JS4类体系

一、命名规则

在代码中，使用一致的命名习惯：命名空间和文件名，有助于保持你的代码组织、结构化和可读性。

1.类

  # 类名只能包含字母数字字符。数字是允许的，但在大多数情况下不鼓励，除非他们属于一个技术术语。
  # 类名应该分成包。最少应该有一个独特的顶层的命名空间，类名紧随其后。例如： MyCompany.data.CoolProxy

  # 顶层的命名空间和实际的类名应该是UpperCamelCase（第一个词的首字母，以及后面每个词的首字母都大写，叫做“大骆驼拼写法”），其他应该都是小写。
     例如: MyCompany.form.action.AutoLoad


 # 没有被 Sencha（Sencha是由ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个开源项目）分配的类绝不可用EXT作为顶层的命名空间。
 # 缩略语也应该遵循上述CamelCased公约。例如: MyCompany.server.Http instead of MyCompany.server.HTTP

2.源文件

类的名字直接映射成存放它们的文件路径。因此,每个文件都必须有一个类。
例如：Ext.util.Observable 存放在 path/to/src/Ext/util/Observable.js   其中path/to/src是应用程序类的目录。


3.方法和变量

类似于类名，方法和变量名只能包含字母数字字符。数字是允许的，但在大多数情况下不鼓励，除非他们属于一个技术术语。不要使用下划线、连字符或任何其他非字母数字字符。方法和变量名应该总是处于lowerCamelCase（第一个词的首字母小写，后面每个词的首字母大写，叫做“小骆驼拼写法”）。这也适用于首字母缩写。

4.属性

类的属性名遵循与方法和变量同样的命名规则，除非他们是静态常数的情况下。静态类属性，应该都是大写。例如：Ext.MessageBox.YES = "Yes"

二、实战

1.定义类

Ext.define(className, members, onClassCreated);

• className:：类名
• members：一个包含了一个类成员（关键字-值）的集合对象
• onClassCreated ：一个可选的回调函数。当这个类所有的依赖都准备好了，和类本身就是完全创造了，便会调用。由于创建类的异步本质，该回调函数在很多情况下都是有用的

例如：

Ext.define('My.sample.Person', {
    name: 'Unknown',

    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },

    eat: function(foodType) {
        alert(this.name + " is eating: " + foodType);
    }
});

var aaron = Ext.create('My.sample.Person', 'Aaron');
    aaron.eat("Salad"); // alert("Aaron is eating: Salad");

上面例子用 Ext.create来创建类的实例。我们也可以利用new关键字(new My.sample.Person())。然而，建议使用Ext.create，因为它可以让你充分利用动态加载。

2.配置config

例子：

Ext.define('My.own.Window', {
   /** @readonly */
    isWindow: true,

    config: {
        title: 'Title Here',

        bottomBar: {
            enabled: true,
            height: 50,
            resizable: false
        }
    },

    constructor: function(config) {
        this.initConfig(config);
    },

    applyTitle: function(title) {
        if (!Ext.isString(title) || title.length === 0) {
            alert('Error: Title must be a valid non-empty string');
        }
        else {
            return title;
        }
    },

    applyBottomBar: function(bottomBar) {
        if (bottomBar && bottomBar.enabled) {
            if (!this.bottomBar) {
                return Ext.create('My.own.WindowBottomBar', bottomBar);
            }
            else {
                this.bottomBar.setConfig(bottomBar);
            }
        }
    }
});

var myWindow = Ext.create('My.own.Window', {
    title: 'Hello World',
    bottomBar: {
        height: 60
    }
});

alert(myWindow.getTitle()); // alerts "Hello World"

myWindow.setTitle('Something New');

alert(myWindow.getTitle()); // alerts "Something New"

myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"

myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100

3.静态成员

静态成员定义可以用statics

例子：

Ext.define('Computer', {
    statics: {
        instanceCount: 0,
        factory: function(brand) {
            // 'this' in static methods refer to the class itself
            return new this({brand: brand});
        }
    },

    config: {
        brand: null
    },

    constructor: function(config) {
        this.initConfig(config);

        // the 'self' property of an instance refers to its class
        this.self.instanceCount ++;
    }
});

var dellComputer = Computer.factory('Dell');
var appleComputer = Computer.factory('Mac');

alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"

alert(Computer.instanceCount); // Alerts "2"

三、调试

你可以用Ext.getDisplayName()显示任何方法的名称。它能抛出包含类名和方法名的错误，因此很有用。

throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');