extjs种系统

extjs类系统
1 ,类系统Class Systemextjs4.0开始，重构了新的类系统。本教程分为以下四部分：(1) 概述，介绍强大类系统的必要性。（2）命名习惯，阐述extjs命名类，方法，属性，变量和文件的最佳实践。（3）动手实践，提供详细的一步步的编码例子。（4） 错误处理和调试。阐述异常处理技巧。
(1) 概述，介绍强大类系统的必要性。EXTJS4.0有超过300个类。JavaScript is a classless, prototype-oriented language. Hence by nature, one of the language's most powerful features is flexibilityJS可以采取很多不同的方式，不同的编码风格和技术完成同样的工作。但是也正是这种特性会导致无法预料的代价。没有一个统一的架构，JS代码会非常难理解，维护和重用。基于类的编码方式仍然是面向对象中最受欢迎的。但是OOP不具备JS等语言的动态特性。Each approach has its own pros and cons,
每一种方法都有它的优缺点。EXTJS4.0将JS和OOP的优点结合起来啦。
（2） 命名习惯在编码中对类，变量等使用统一的命名习惯，可以使代码蛮得有组织，结构化和可读性好。。a, 类类名最好只包括字母，数字虽然也可以，但是EXTJS不推荐这样做。最好不要采用下划线，联字符或者其他非字母字符。
比如说：MyCompany.useful_util.Debug_Toolbar is discouraged? ? ? ? MyCompany.util.Base64 is acceptable
类名必须采用合适的命名空间以包的形式组织起来。命名空间必须唯一。

var aaron = Ext.create('My.sample.Person', 'Aaron');
// new My.sample.Person())同样也可以的，但是推荐Ext.create() 方法，后者可以利用动态加载机制。 aaron.eat("Salad"); // alert("Aaron is eating: Salad");
(2)，配置
extjs4.0引入一种专门的config属性。特点如下：
配置信息完全从其他类成员封装。
如果类的Gettert和Setter方法没有定义，那么在创建这些类的时候，类的配置属性的getter和setter会自动生成。

每一个config 属性还会生成一个apply方法，自动生成的setter方法会在设置值之前内部调用apply方法。如果在设置值之前 需要定制自己的业务逻辑时，可以重写这个方法。如果apply方法没有返咽一个值，相应的setter方法不会设置值。如：

Ext.define('My.own.Window', {   /** @readonly */    isWindow: true,    config: {        title: 'Title Here',        bottomBar: {            enabled: true,            height: 50,            resizable: false        }    },    constructor: function(config) {        this.initConfig(config);        return this;    },    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 && bottomBar.enabled) {            if (!this.bottomBar) {                return Ext.create('My.own.WindowBottomBar', bottomBar);            }            else {                this.bottomBar.setConfig(bottomBar);            }        }    }});

使用方法如下：

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"

(3) 静态

静态成员采用static 属性设定。

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    },    constructor: function(config) {        this.initConfig(config);        // the 'self' property of an instance refers to its class        this.self.instanceCount ++;        return this;    }});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"alert(Computer.instanceCount); // Alerts "2"
4 错误处理和调试
采用 Ext.getDisplayName()显示任何方法的名字 

?

查看更多 下一篇