定义类与使用类
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());
声明:转载请在明显位置给出本文 URL 地址。参照 CC署名 协议授权。