Ext.js - 类系统

Ext JS是一个具有面向对象编程功能的JavaScript框架. Ext是命名空间，它封装了Ext JS中的所有类.

在Ext JS中定义一个类

Ext提供了300多个类，其中我们可以使用各种功能.

Ext.define()用于定义Ext JS中的类.

语法

Ext.define(class name, class members/properties, callback function);

类名是根据应用程序结构的类的名称.例如，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();

使用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类并在控制器或此应用程序中使用它的函数.