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.define(studentApp.view.StudentDetailsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

ที่นี่คลาสที่กำหนดเองของเรา StudentDetailsGrid กำลังใช้คุณสมบัติพื้นฐานของ Ext JS คลาส GridPanel

การใช้ Mixins

Mixins เป็นวิธีอื่นในการใช้คลาส A ในคลาส B โดยไม่ต้องขยาย

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

มีการเพิ่มมิกซ์อินในคอนโทรลเลอร์ที่เราประกาศคลาสอื่น ๆ ทั้งหมดเช่นร้านค้ามุมมอง ฯลฯ ด้วยวิธีนี้เราสามารถเรียกคลาส DepartmentUtils และใช้ฟังก์ชันในคอนโทรลเลอร์หรือในแอปพลิเคชันนี้