Ext.js - 类系统

Ext.js类系统 - 从简单和简单的步骤学习ExtJS，从基本到高级概念，包括概述，环境设置，命名约定，架构，编写第一个Ext JS程序，OOPS概念，Dom操作，自定义事件和监听器，容器和布局，GUI控件（xType），UI组件，调试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类并在控制器或此应用程序中使用它的函数.