定义类
Ext.define('Cookbook.Vehicle', {
Manufacturer: 'Aston Martin',
Model: 'Vanquish',
getDetails: function(){
alert('I am an ' + this.Manufacturer + ' ' + this.Model);
}
}, function(){
Console.log('Cookbook.Vehicle class defined!');
});
第一个参数是类名，第二个参数是一个对象，包含类中定义的属性和方法，第三个参数是可选的回调函数，在对象被实例化后执行。
定义的类由 Ext.ClassManager转为Ext.Class的实例，在此过程执行一系列前期和后续的步骤。.前期步骤的顺序如下:
Loader: 加载需要的还没有被加载过的类
Extend: 基于已有类扩展
Mixins: 把定义的 Mixins 融合到类中
Config: 在配置选项中的属性将被处理，并创建相应的get/set/apply/reset 方法
Statics: 处理静态属性和方法
后续步骤的顺序如下：
Aliases: 定义别名，以便通过xtype即可创建实例
Singleton: 如果定义为单一对象，此时创建实例
Legacy: 不太明白，暂时没用到
也可以通过registerPreProcessor和registerPostProcessor方法添加自定义的处理步骤
如果没有指明基类，默认基类是Ext.Base
Mixins 是一些可以把别的类的属性和方法融合进当前类中，相当于一个子集，简化定义，减少代码量。
1. 定义相机功能类:
Ext.define('HasCamera', {
takePhoto: function(){
alert('Say Cheese! .... Click!');
}
});
2. 定义智能手机类，要求必须具有相机功能.
Ext.define('Cookbook.Smartphone', {
mixins: {
camera: 'HasCamera'
}
});
3. 在智能手机类可调用相机功能类的方法:
Ext.define('Cookbook.Smartphone', {
mixins: {
camera: 'HasCamera'
},
useCamera: function(){
this.takePhoto();
}
});
使用组件查询来访问组件：
1.通过xtype查询
var panels = Ext.ComponentQuery.query('panel');
2.通过css样式级联的方式，如查询某个panel中的所有button
var buttons = Ext.ComponentQuery.query('panel button');
3.通过组件的属性值
var saveButton = Ext.ComponentQuery.query('button[action="saveUser"]');
4.基于ID
var usersPanel = Ext.ComponentQuery.query('#usersPanel');
等等。
扩展extjs的组件
1. 定义扩展组件的类:
Ext.define('Cookbook.DisplayPanel', {
extend: 'Ext.panel.Panel'
});
2. 重载 initComponent 方法并调用父类的同名方法:
Ext.define('Cookbook.DisplayPanel', {
extend: 'Ext.panel.Panel',
initComponent: function(){
// call the extended class' initComponent method
this.callParent(arguments);
}
});
3. 应用具体配置项:
i
nitComponent: function(){
// apply our configuration to the class
Ext.apply(this, {
title: 'Display Panel',
html: 'Display some information here!',
width: 200,
height: 200,
renderTo: Ext.getBody()
});
// call the extended class' initComponent method
this.callParent(arguments);
}
4. 调用:
var displayPanel = Ext.create('Cookbook.DisplayPanel');
displayPanel.show();