【ExtJS】关于自定义组件

浏览数：29 / 时间：2015年06月09日

一、命名规范

　　在你编码过程中对类，名字空间以及文件名使用统一的命名规则对你代码的组织，结构化以及可读性有很大的好处。

1、类命名规范:

　　类名最好只包含字母，在多数情况下，数字是不鼓励使用的，除非非要用不可，也不要使用下划线，-以及其它非字母字符，例如：

　　　　MyCompany.useful_util.Debug_Toolbar 不鼓励这样命名

　　　　MyCompany.util.Base64 可接受的命名

　　类名最好包括组织，在适当的名字空间通过使用.来访问对象属性，至少，类名应该有一个顶层的包。例如:

　　　　MyCompany.data.CoolProxy

　　　　MyCompany.Application

　　顶层的包名以及实际的类名应该使用CamelCased命名规范，其它应该为小写，如下：

　　　　MyCompany.form.action.AutoLoad

　　不要使用Ext作为顶层包名，首字母应该遵循CamelCased命名规范，如:

　　　　Ext.data.JsonProxy instead of Ext.data.JSONProxy

　　　　MyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser

　　　　MyCompany.server.Http instead of MyCompany.server.HTTP

2、源文件命名规范:

　　类名直接映射到存储该类的文件路径，因此，每个文件只能有一个类，如

　　　　Ext.util.Observable is stored in path/to/src/Ext/util/Observable.js

　　　　Ext.form.action.Submit is stored in path/to/src/Ext/form/action/Submit.js

　　　　MyCompany.chart.axis.Numeric is stored in path/to/src/MyCompany/chart/axis/Numeric.js

　　path/to/src目录包含应用的所有类，所有类应该放在这个公共根目录下，以合适的名字空间来获得最好的开发，管理以及部署体验。

　　方法以及变量的命名规则与类命名相似，方法和变量的命名也只包含字母，数字不鼓励使用，除非必须用到，同样不使用下划线，-以及其它非字母字符。

　　方法和变量命名应该遵循CamelCased命名规范，应适用首字母。例如

　　　　可接受的方法名:

　　　　　　encodeUsingMd5()

　　　　　　用getHtml() 替代 getHTML()

　　　　　　用getJsonResponse()替代 getJSONResponse()

　　　　　　用 parseXmlContent()替代parseXMLContent()

　　　　可接受的变量名:

　　　　　　var isGoodName

　　　　　　var base64Encoder

　　　　　　var xmlReader

　　　　　　var httpServer

3、属性命名：

　　类属性命名和上面方法以及变量一样，除了当属性是静态常量的时候。

　　当属性是静态常量时，字母应该大写。

　　　　Ext.MessageBox.YES = "Yes"

　　　　Ext.MessageBox.NO = "No"

　　　　MyCompany.alien.Math.PI = "4.13"

二、define

　　在ExtJS4之前，使用Ext.extend来创建类，在ExtJS4之后，使用Ext.define来创建类。

　　基本语法:

　　Ext.define(className, members, onClassCreated);

　　其中，

　　　　className:类名

　　　　members:这是一个对象，它表示一个以键值对形式表示的类成员集合。

　　　　onClassCreated:这是一个可定制的回调函数，当这个类所依赖的类都准备完毕时便会调用这个回调函数，并且类本身将会完全创建。由于有这个类创建新异步属性，这个回调在很多情况都会很有用。

例：

 1 Ext.define(‘MyComponent.getWH‘, {
 2     showSize: function(){
 3             var dom = Ext.get(Ext.getBody().dom);
 4             Ext.Msg.alert(‘My Component WH‘,‘Dom Width: ‘ + dom.getWidth() + ‘<br />Dom Height: ‘ + dom.getHeight());
 5     }
 6 });
 7 Ext.onReady(function(){
 8     var myPanel = Ext.create(‘MyComponent.getWH‘,{
 9         renderTo: Ext.getBody()
10     });
11     myPanel.showSize();
12 });