类系统(Class System)
优质
小牛编辑
124浏览
2023-12-01
Ext JS是一个具有面向对象编程功能的JavaScript框架。 Ext是命名空间,它封装了Ext JS中的所有类。
在Ext JS中定义一个类
Ext提供了300多个类,我们可以使用它们来实现各种功能。
Ext.define()用于定义Ext JS中的类。
语法 (Syntax)
Ext.define(class name, class members/properties, callback function);
类名是根据app结构的类的名称。 例如,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中创建对象的不同方法。
使用新关键字
var studentObject = new student();
studentObject.getStudentName();
Using 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被添加到控制器中,我们在其中声明所有其他类,例如store,view等。这样,我们可以调用DepartmentUtils类并在控制器或此应用程序中使用它的函数。