Ext.js - Hệ thống lớp học

Ext JS là một khung công tác JavaScript có các chức năng của lập trình hướng đối tượng. Ext là không gian tên, đóng gói tất cả các lớp trong Ext JS.

Định nghĩa một lớp trong Ext JS

Ext cung cấp hơn 300 lớp, chúng ta có thể sử dụng cho các chức năng khác nhau.

Ext.define () được sử dụng để xác định các lớp trong Ext JS.

Cú pháp

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

Tên lớp là tên của lớp theo cấu trúc ứng dụng. Ví dụ: appName.folderName.ClassName studentApp.view.StudentView.

Thuộc tính / thành viên của lớp xác định hành vi của lớp.

Chức năng gọi lại là tùy chọn. Nó được gọi khi lớp đã được tải đúng cách.

Ví dụ về Định nghĩa lớp 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'
   }]
});

Tạo đối tượng

Giống như các ngôn ngữ dựa trên OOPS khác, chúng ta cũng có thể tạo các đối tượng trong Ext JS.

Sau đây là các cách khác nhau để tạo các đối tượng trong Ext JS.

Sử dụng từ khóa mới

var studentObject = new student();
studentObject.getStudentName();

Sử dụng Ext.create ()

Ext.create('Ext.Panel', {
   renderTo : 'helloWorldPanel',
   height : 100,
   width : 100,
   title : 'Hello world',
   html : 	'First Ext JS Hello World Program'		
});

Kế thừa trong Ext JS

Kế thừa là nguyên tắc sử dụng chức năng được định nghĩa trong lớp A vào lớp B.

Trong Ext JS, kế thừa có thể được thực hiện bằng hai phương pháp:

Ext.extend

Ext.define(studentApp.view.StudentDetailsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

Ở đây, lớp tùy chỉnh StudentDetailsGrid của chúng tôi đang sử dụng các tính năng cơ bản của lớp Ext JS GridPanel.

Sử dụng Mixin

Mixins là một cách khác để sử dụng lớp A trong lớp B mà không cần mở rộng.

mixins : {
   commons : 'DepartmentApp.utils.DepartmentUtils'
},

Mixin được thêm vào bộ điều khiển nơi chúng ta khai báo tất cả các lớp khác như cửa hàng, chế độ xem, v.v. Bằng cách này, chúng ta có thể gọi lớp DepartmentUtils và sử dụng các chức năng của nó trong bộ điều khiển hoặc trong ứng dụng này.