【ExtJS】关于自定义组件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、命名规范

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

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

例：

 Ext.define('MyComponent.getWH', {

     showSize: function(){

             var dom = Ext.get(Ext.getBody().dom);

             Ext.Msg.alert('My Component WH','Dom Width: ' + dom.getWidth() + '<br />Dom Height: ' + dom.getHeight());

     }

 });

 Ext.onReady(function(){

     var myPanel = Ext.create('MyComponent.getWH',{

         renderTo: Ext.getBody()

     });

     myPanel.showSize();

 });

效果：