ExtJS学习笔记：定义extjs类别

it2025-08-26 17

类的定义

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

转载于:https://www.cnblogs.com/bhlsheji/p/4638035.html

相关资源：数据结构—成绩单生成器

最新回复(0)