Ext.js - 类系统
Ext JS 是一个具有面向对象编程功能的 JavaScript 框架。Ext 是命名空间,它封装了 Ext JS 中的所有类。
在 Ext JS 中定义类
Ext 提供了 300 多个类,我们可以将它们用于各种功能。
Ext.define() 用于定义 Ext JS 中的类。
语法
Ext.define(类名,类成员/属性,回调函数);
类名是根据应用程序结构命名的类的名称。例如,appName.folderName.ClassName studentApp.view.StudentView。
类属性/成员定义类的行为。
回调函数是可选的。当类正确加载时,它会被调用。
Ext JS 类定义示例
Ext.define(studentApp.view.StudentDeatilsGrid, {
extend : 'Ext.grid.GridPanel',
id : 'studentsDetailsGrid',
store : 'StudentsDetailsGridStore',
renderTo : 'studentsDetailsRenderDiv',
layout : 'fit',
columns : [{
text : 'Student Name',
dataIndex : 'studentName'
},{
text : 'ID',
dataIndex : 'studentId'
},{
text : 'Department',
dataIndex : 'department'
}]
});
创建对象
与其他基于 OOPS 的语言一样,我们也可以在 Ext JS 中创建对象。
以下是在 Ext JS 中创建对象的不同方法。
使用 new 关键字
var studentObject = new student(); studentObject.getStudentName();
使用 Ext.create()
Ext.create('Ext.Panel', {
renderTo : 'helloWorldPanel',
height : 100,
width : 100,
title : 'Hello world',
html : 'First Ext JS Hello World Program'
});
Ext JS 中的继承
继承是将类 A 中定义的功能应用于类 B 的原理。
在 Ext JS 中,可以使用两种方法实现继承 −
Ext.extend
Ext.define(studentApp.view.StudentDetailsGrid, {
extend : 'Ext.grid.GridPanel',
...
});
这里,我们的自定义类 StudentDetailsGrid 使用了 Ext JS 类 GridPanel 的基本功能。
使用 Mixins
Mixins 是在类 B 中使用类 A 的另一种方式,无需扩展。
mixins : {
commons : 'DepartmentApp.utils.DepartmentUtils'
},
在控制器中添加了 Mixins,我们在其中声明了所有其他类,例如存储、视图等。这样,我们可以调用 DepartmentUtils 类并在控制器或此应用程序中使用其函数。