ExrJS4学习笔记1 类

ExtJS4创建类的方式

在Extjs4中,你只需要使用一个方法就可以解决这些问题:Ext.define.以下是它的基本语法: 1: Ext.define(className, members, onClassCreated);
className: 类名
members:代表类成员的对象字面量(键值对,json)
onClassCreated: 可选的回调凼数,在所有依赖都加载完毕,幵且类本身建立后觌发.由亍类创建的新的异步特性,这个回调凼数在很多情况下都很有用.这些在第四节中将迚一步讨论
例如:

    Ext.define('My.sample.Person', {
        name: 'Unknown',
        constructor: function (name) {
            if (name) {
                this.name = name;
            }
            return this;
        },
        eat: function (foodType){
            alert(this.name + " is eating " + foodType);
            return this;
        }
    });
    var li = Ext.create('My.sample.Person', 'LiLei');
    li.eat('面包');

程序执行结果会弹出alert窗口显示"LiLei is eating 面包".
注意：我们使用Ext.create()方法创建了My.sample.Person类的一个新实例.我们也可以使用新的关键字(new My.sample.Person())来创建.然而,建议养成始终用Ext.create来创建类示例的习惯,因为它允许你利用动态加载的优势.更多关于动态加载信息,请看入门指南:入门指南

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

2.配置

 在ExtJS 4 ,我们引入了一个专门的配置属性,用于提供在类创建前的预处理功能.特性包括:

• 配置完全封装其他类成员
•  getter和setter.如果类没有定义这些方法,在创建类时将自动生成配置的属性的getter和setter方法。
• 同样的,每个配置的属性自动生成一个apply方法.自动生成的setter方法内部在设置值之前调用apply方法.如果你要在设置值之前自定义自己的逻辑,那就重载apply方法.如果apply没有返回值,则setter不会设置值.看下面applyTitle的例子:

 

 

Ext.define('My.own.Window', {
            isWindow: true,
            config: {
                title: 'Title Here',
                bootomBar: {
                    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 Muset 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()); //Hello World

        myWindow.setTitle('Someting New');
        alert(myWindow.getTitle()); //Something New

        myWindow.setTitle(null); //alter "Error: Title must be a valid non-empty string"

        myWindow.setBootomBar({ height: 100 }); //高度就会被设置成 100了,但是这里的Bottom为啥b大写了呢？

 3.Static

 静态成员可以使用statics配置项来定义

 

 

Ext.define('Computer', {
            statics: {
                instanceCount: 0,
                factory: function (brand) { //品牌，商标
                    //this 在这里引用类本身
                    return new this({ brand: brand });
                }
            },
            config: {
                brand: null
            },
            constructor: function (config) {
                this.initConfig(config);//初始化 配置
                //直接掉用当前类的静态方法
                this.self.instanceCount++;
                return this;
            }
        });
        var dellComputer = Computer.factory('Dell');
        var aappleCompute = Computer.factory('Mac');

        //使用自动生成的getter的配置属性的值。alert“Mac”
        alert(aappleCompute.getBrand());

        alert(Computer.instanceCount);//alert "2"

 

 ExtJs4 TreeNode设置节点的值：node.set('text', 'newValue')