ExtJs4.1札记 _JavaScript

ExtJs4.1笔记

1 ： ExtJs4.1之前的老版本，想要定义一个自己的class 常常需要这么做：

Ext.ns('My.cool');//定义namespace
My.cool.Window = Ext.extend(Ext.Window, { ... });//继承Ext.Window,  {...}里是自己的对象属性

??? 然而在ExtJs4.1中有了一个新的写法

Ext.define(className, members, onClassCreated);

?例如：

Ext.define('My.sample.Person', {
    name: 'Unknown',

    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },

    eat: function(foodType) {
        alert(this.name + " is eating: " + foodType);
    }
});

var aaron = Ext.create('My.sample.Person', 'Aaron');
    aaron.eat("Salad"); // alert("Aaron is eating: Salad");

?省掉了定义namespace的步骤。

2：定义静态方法

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 ++;
    }
});

? 访问的时候可以直接用Computer.factory();

3: initConfig(config)

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);
    },

    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
    }
});

?? 调用initConfig(config)可以给每个config生成getter和settter方法，并且生成appy方法，apply方法是在setter之前调用的方法，例如上面的applyTitle在setter之前调用，如果返回title才会调用setter 否则不会。

因此我们可以用myWindow.getTitle()来得到title的值。