本文地址： http://blog.csdn.net/sushengmiyan/article/details/38479079
本文作者：sushengmiyan
-------------------------------------------------------------资源链接-----------------------------------------------------------------------
翻译来源 Sencha Cmd官方网站： http://www.sencha.com/products/extjs/up-and-running/the-class-system
------------------------------------------------------------------------------------------------------------------------------------------------
本篇指导旨在给想要创建或者从EXT JS 4.X或者EXT JS 5.X继承已有类的任何开发者的。
概述
-------
EXT JS 5自带了有超过300的类，到目前为止有200多万的开发者在使用extjs开发，他们来自不同的地方，有不同的背景。所以这样说来，在提供一份公共代码结构上我们就面临着一个巨大的挑战，这些代码结构是：
1.大家都熟悉了解，简单容易学习
2.开发迅速，调试方便，部署的时候也没有痛苦
3.有组织的，可扩展的，并且是可维护的
JavaScript是面向原型的类语言，其中一个最强大的功能就是*，有好多的解决方案，可以使用不同的编码风格还有技术问题，但是这样就会以不可预知为代价了。没有一个统一的结构，javascript代码就很难理解，很难维护并且不好复用。
另一方面，基于类的编程仍然是最流行的面向对象的编程模式，基于类的语言通常需要强类型，封装和标准的编码惯例，通过让开发人员坚持大量的原则,代码更可能是可预测的,可扩展和可伸缩。然而,这个模型没有JavaScript的动态能力。
每个方法都有优点和缺点,但是我们可以保持好的而坏的部分同时隐藏?答案是肯定的,你可以在Ext JS找到解决方案。
命名约定
类命名约定
MyCompany.useful_util.Debug_Toolbar
这个是被推荐的
MyCompany.util.Base64
这个是可以接受的
MyCompany.data.CoolProxy
MyCompany.Application
*名称空间和实际的类名应该驼峰模式其它一切应该都小写，例如:
MyCompany.form.action.AutoLoad
不是使用sencha生成的类尽量不要使用Ext作为*空间。缩略词也应该遵守驼峰预约定，如：
使用 MyCompany.util.HtmlParser 而不是MyCompary.parser.HTMLParser
使用MyCompany.server.Http 而不是 MyCompany.server.HTTP
源文件命名约定
Ext.form.action.Submit 是在如下目录存储的 path/to/src/Ext/form/action/Submit.js
MyCompany.chart.axis.Numeric 是在如下目录存储的 path/to/src/MyCompany/chart/axis/Numeric.js
方法和变量的命名规则
可接受的方法名称:
encodeUsingMd5()
getHtml()而不是 getHTML()
getJsonResponse()而不是getJsonResponse()
parseXmlContent()而不是parseXMLContent()
可接受的变量名:
var isGoodName
var base64Encoder
var xmlReader
var httpServer
属性的命名规则
静态类常量属性应该全部大写。例如:
Ext.MessageBox.NO = "No"
MyCompany.alien.Math.PI = "4.13"
声明
旧的方式
var MyWindow = Ext.extend(Object, { ... });
这种方法很容易遵循以创建一个新的类继承自另一个。除了直接继承,我们没有其他方面创造流畅的API的类。这个排除诸如配置、静态和mixins。我们稍后将详细回顾这些物品在本指南。
My.cool.Window = Ext.extend(Ext.Window, { ... });
在本例中,我们想我们新类命名空间,并使其从Ext.window延伸。有两个问题我们需要解决:
xt.ns('My.cool');
My.cool.Window = Ext.extend(Ext.Window, { ... });
第二个问题不容易解决,因为ext.window可能取决于许多其他类。反过来,这些依赖关系可能依赖于其他类的存在。出于这个原因,Ext JS 4之前编写的应用程序引入整个ext-all.js的形式,不管应用程序是不是只需要一小部分的框架。
新的方式
Ext.define(className, members, onClassCreated);
className:类名
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");
注意:我们创建了一个新的My.sample的实例。使用Ext.create()方法。我们可以使用新的关键字(new My.sample.Person())。不过建议得到的习惯总是使用Ext.create因为它允许您利用动态加载。动态加载的更多信息参见入门指南
配置
2.如果方法还未定义，创建期间Getter和setter方法为每个配置属性自动生成到类原型类。
3.一个apply方法也为每个属性生成配置。内部自动生成setter方法调用apply方法之前设置值。你可以覆盖apply方法申请配置属性,如果你需要运行自定义逻辑之前设置的值。如果apply不返回一个值,setter不会设置值。
你可以看到下面的配置示例：
Ext.define('My.own.Window', {
/** @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
}
});
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 });
alert(myWindow.getBottomBar().getHeight()); // alerts 100
静态变量
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');
alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"
错误控制和调试
throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');
当有错误在使用Ext.define时抛出的时候，你应该查看这个方法还有类的堆栈信息，你可以看下谷歌Chrome中报错的信息如下：