Ext类系统

定义类与使用类

Ext.define(className, members, onClassCreated);

 

•  className：类名
   members：是一个对象 **键:值** 的集合
   onClassCreated：是一个可选的回调函数

 

例子:

// 定义Person类  Tutorials.sample 类似包名
Ext.define('Tutorials.sample.Person', {
	name: 'Unknown',	// name 属性
	// 构造函数
	constructor: function(name) {
	 	if(name){ //如果有这个参数，就把参数赋结当前对象的 name
	 		this.name = name;
	 	}
	},
	// eat 函数
	eat: function(foodType) {
		alert(this.name + "is eating: " + foodType);
	}
});
// 使用类
var aaron = Ext.create('Tutorials.sample.Person', 'Alex');
aaron.eat('CK');

config 块

Ext.define('My.own.Window', {
    /** @readonly */
    isWindow: true,	//没有 setter getter 方法 有点像 private
    
    config: { //这里配置的属性 ExtJS 会自动生成 setter getter 方法 自动生成了一个apply方法
        title: 'Title Here',
        bottomBar: {
            height: 50,
            resizable: false
        }
    },

    constructor: function(config) {	//带JSON参数的构造函数
    	console.log("执行: Window 构造函数");
        this.initConfig(config);		//把JSON对象配置到 config 块中 属性 K-V 相互对应
    },

    //重构 title 属性 apply 方法 如果apply方法没有返回值，setter就不会起作用
    applyTitle: function(title) {
    	console.log("执行: applyTitle");
        if (!Ext.isString(title) || title.length === 0) {
        	console.error('Error: Title must be a valid non-empty string');
        }
        else {
        	console.log("getter: " + title);
            return title;
        }
    },

    applyBottomBar: function(bottomBar) {
    	console.log("执行: applyBottomBar");
        if (bottomBar) {
            if (!this.bottomBar) {
            	console.log("getter: bottomBar =" + bottomBar);
                return Ext.create('My.own.WindowBottomBar', bottomBar);
            }
            else {
            	console.log("setter: bottomBar =" + bottomBar);
                this.bottomBar.setConfig(bottomBar);
            }
        }
    }
});

/** A child component to complete the example. */
Ext.define('My.own.WindowBottomBar', {
    config: {
		height: undefined,
        resizable: null
    }
});
var myWindow = Ext.create('My.own.Window', {
	title: 'Hello World',
	bottomBar: {
		height: 60
	}
});

console.log('%c当前 title = ' + myWindow.getTitle(),"color: blue");
console.log('%csetTitle: Welcome','color: green');
myWindow.setTitle('Welcome');
console.log('%c当前 title = ' + myWindow.getTitle(),"color: blue");
console.log('%csetTitle: null (因为 applyTitle 有检验，所以下面会报错.)','color: green');
myWindow.setTitle(null);
console.log('%c当前 title = ' + myWindow.getTitle(),"color: blue");
console.log('%c当前 bottomBar.height = ' + myWindow.getBottomBar().getHeight(),"color: blue");
console.log('%csetter BottomBar({ height: 100,resizable: true })','color: green');
myWindow.setBottomBar({ height: 100,resizable: true });
console.dir(myWindow.getBottomBar());