ExtJs4开发深度解析

ExtJs使用了大量的设计模式来编写，表现形式，以及控件使用不想多谈了。我从2.0做到4.0最大的感慨是：更新太快，很多好的东西在最新版本，但是最新版本不支持前面版本的代码。

基于脚本的灵活性总结：
1.代码命名务必规范

2.整体框架一定要清晰

3.代码一定要有可扩展性

 

(一)编码和规范

--------------------------------------------------------------------------------

*在所有类、命名空间（namespace）和文件名中使用一致的命名约定,有助于保持代码的良好结构和可读性。

1) Classes

类名只能包含字母和数字。允许包含数字，但是大部分情况下不建议使用，除非这些数字是专业术语的一部分。不要使用下划线，连字符等非数字字母符号。例如：

 
MyCompany.useful_util.Debug_Toolbar is discouraged
MyCompany.util.Base64 is acceptable

类名应该包含在使用点号分隔的命名空间中。至少，要有一个顶级命名空间。例如：

 
MyCompany.data.CoolProxyMyCompany.Application

顶级命名空间和实际的类名应使用驼峰命名（CamelCased），其他则为小写。例如：

 
MyCompany.form.action.AutoLoad

不是Sencha开发的类（即不是Ext自带的）不要使用Ext做为顶级命名空间。缩写也要遵守以上的驼峰式命名约定。例如：

 
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  存放在 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 是你的应用所在目录。所有类都应该在这个通用根目录下，并且使用适当的命名空间以利于开发、维护和部署。

3）方法和变量

•和类命名一样，方法和变量也只能包含字母和数字。数字同样是允许但不建议，除非属于专业术语。不要使用下划线，连字符等任何非字母数字符号。

•方法和变量名一样使用驼峰式命名，缩写也一样。

•举例

•合适的变量名： _labTelephone; _grid;
                
•合适的变量名：

方法：getForm,setState.......
事件：onClick,onContextMenuClick.....

 

(二).整体框架一定要清晰。

+++
|-- css   样式文件
|-- ext   ExtJS库
|-- images  图片文件
|-- javascript 脚本文件
 |-- data  数据类
 |-- google  Google相关
 |-- map   地图类
 |-- module  模块类
 |-- webui  界面类
 App.js    逻辑类
 Global.js   全局类
 Lang.js   语言类
 Module.js   模块类

 

(三).类库的使用一定要特别注重通用性。

ex:3.0和4.0对于store这个的不同就是很大区别。我用3.0开发的系统，升级到4.0，那么就要重写曾经所有的store。

那么最方面的方法：用一个类专门管理store;对外部只提供接口

WebIM.Common = {
    /** 生成数据访问类 <适应本地数组和ajax>
    @param 数据源的抽象
    @param【比如3-4版本的改动，就只需要改动这里，不需要对每个改动】
    @param {Object} opts { url: '', id: '', data: '', total: '', fields: [], ...}
    */
    newDataStore: function(opts)
    {
        opts = opts || {};
        return new Ext.data.Store(Ext.applyIf(opts, {
            autoLoad: opts.autoload ? true : opts.autoload,
            autoDestroy: opts.autodestroy ? true : opts.autodestroy,
            pageSize: opts.pagesize || 25,
            //            model: WebIM.DataModel,
            fields: opts.fields || [],
            remoteSort: opts.remotesort ? opts.remotesort : true,
            proxy: opts.proxy ? opts.proxy : {
                url: opts.url,
                type: 'ajax',
                reader: {
                    type: 'json',
                    root: opts.data || 'data',
                    idProperty: opts.id || 'id',
                    totalProperty: opts.total || 'total',
                    successProperty: 'success'
                },
                extraParams: opts.extraparams ? opts.extraparams : null,
                simpleSortMode: opts.simplesortmode ? opts.simplesortmode : true
            },
            listeners: Ext.applyIf(opts.listeners || {},
                {
                    exception: function(st, type, act, req, rsp)
                    {
                        alert("a")
                    }
                })
        }))
    }

}