类管理体系-Class System

命名规范-Naming Conventions

类-Classes

类名称只允许使用字母和数字（alphanumeric）。虽然允许使用数字，但是不建议使用，除非属于专有的技术术语。不要使用下划线、分隔符以及其他非字母和数字的字符。

MyCompany.useful_util.Debug_Toolbar    Bad
MyCompany.util.Base64                  Good

类名称应该使用命名空间和包进行分组区隔，应该只有一个最顶层的命名空间，例如：

MyCompany.data.CoolProxy
MyCompany.Application

命名空间和类名应该使用驼峰命名（CamelCased），其他的包名应该使用小写（lower-cased），例如：

MyCompany.form.action.AutoLoad

不是Sencha发布的类，不要使用Ext命名空间。首字母缩略词也应该遵循 CamelCased 样式，例如：

Ext.data.JsonProxy           替代    Ext.data.JSONProxy
MyCompany.util.HtmlParser    替代    MyCompary.parser.HTMLParser
MyCompany.server.Http        替代    MyCompany.server.HTTP

源文件-Source Files

类的名称直接映射到类文件的存储路径，所以每个类必须用单独一个文件来定义，例如：

Ext.util.Observable             存储在    path/to/src/Ext/util/Observable.js
Ext.form.action.Submit          存储在    path/to/src/Ext/form/action/Submit.js
MyCompany.chart.axis.Numeric    存储在    path/to/src/MyCompany/chart/axis/Numeric.js

path/to/src是应用程序类的存储目录，所有类都应该存储在这个公共目录下。

方法和变量-Methods and Variables

与类的命名一致，方法和变量的名称只允许使用字母和数字（alphanumeric）。虽然允许使用数字，但是不建议使用，除非属于专有的技术术语。不要使用下划线、分隔符以及其他非字母和数字的字符。
方法和变量名应使用驼峰命名（camelCased），首字母缩略词（acronyms）也一样。

# Acceptable method names:
    encodeUsingMd5()
    getHtml()         instead of getHTML()
    getJsonResponse() instead of getJSONResponse()
    parseXmlContent() instead of parseXMLContent()

# Acceptable variable names:
var isGoodName
var base64Encoder
var xmlReader
var httpServer

属性-Properties

类的属性命名遵循同样的规则，除非它是静态常量。
静态属性的命名采用全部大写规则（upper-cased），例如：

Ext.MessageBox.YES = "Yes"
Ext.MessageBox.NO = "No"
MyCompany.alien.Math.PI = "4.13"

定义-Declaration

可以使用Ext.define定义一个类，基本语法如下：

Ext.define(className, members, onClassCreated);

className：类名；
members：一个对象，以“键值对（key-value pairs）“方式定义类的成员；
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 bob = Ext.create('My.sample.Person', 'Bob');

bob.eat("Salad"); // alert("Bob is eating: Salad");

Note：我们使用 Ext.create()方法创建了 My.sample.Person 类的一个实实例，我们也可以使用 new 关键字（new My.sample.Person()），但是建议总是使用 Ext.create 创建类的实例，可以充分发挥动态加载的优势。

配置-Configuration

在类创建之前，强大的 Ext.Class 预处理器（pre-processors）提供了一个专用的config属性用于控制类的创建。包括以下特性：

配置属性与类的其他成员完全隔离；
如果配置属性的getter和 setter 方法没有定义，那么在类的创建过程中将自动生成这些方法；
自动生成的setter方法在设置属性值之前调用 apply方法（如果类定义了该方法）。如果你需要在设置属性值之前运行自定义的逻辑，可以重载配置属性的apply方法。如果你的apply方法没有返回值，那么setter方法将不会设置该属性值。当改变了属性值时，还会调用update方法（如果类同样定义了该方法）。apply和update方法都接收“新属性值”和“原属性值”两个参数；

对于使用配置属性的 Ext 类，不需要手动调用initConfig()方法。但是，如果你定义的类是从 Ext.Base继承或扩展的，那么还需要手动调用initConfig()。

类定义配置示例：

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

   config: {
       title: 'Title Here',

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

   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) {
           if (!this.bottomBar) {
               return Ext.create('My.own.WindowBottomBar', bottomBar);
           }
           else {
               this.bottomBar.setConfig(bottomBar);
           }
       }
   }
});

/** A child component to complete the example. */
Ext.define('My.own.WindowBottomBar', {
   config: {
       height: undefined,
       resizable: true
   }
});

类使用示例：

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

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

myWindow.setTitle('Something New');

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

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

myWindow.setBottomBar({ height: 100 });

// alerts 100
alert(myWindow.getBottomBar().getHeight());

静态成员

静态成员可以通过 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
    }
});

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

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

例外处理和调试

Ext JS 提供了一些调试和例外处理的有用的功能。

可以使用 Ext.getDisplayName() 获取方法的显示名称。这在抛出异常时非常有用，可以抛出引发异常的类名和方法名:

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

当使用 Ext.define() 定义的类的方法抛出异常时，通过基于WebKit内核的浏览器（Chrome 或者 Safari）查看调用堆栈，可以看到引发异常的类名称和方法名称。例如：

Class System