Ext.js - System klas

Ext JS to framework JavaScript posiadający funkcje programowania obiektowego. Ext to przestrzeń nazw, która zawiera wszystkie klasy w Ext JS.

Definiowanie klasy w Ext JS

Ext udostępnia ponad 300 klas, które możemy wykorzystać do różnych funkcjonalności.

Ext.define () służy do definiowania klas w Ext JS.

Składnia

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

Nazwa klasy to nazwa klasy zgodna ze strukturą aplikacji. Na przykład appName.folderName.ClassName studentApp.view.StudentView.

Właściwości / składowe klasy definiują zachowanie klasy.

Funkcja oddzwaniania jest opcjonalna. Jest wywoływana, gdy klasa została poprawnie załadowana.

Przykład definicji klasy 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'
   }]
});

Tworzenie obiektów

Podobnie jak inne języki oparte na OOPS, możemy również tworzyć obiekty w Ext JS.

Poniżej przedstawiono różne sposoby tworzenia obiektów w Ext JS.

Korzystanie z nowego słowa kluczowego

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

Korzystanie z Ext.create ()

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

Dziedziczenie w Ext JS

Dziedziczenie to zasada wykorzystania funkcjonalności zdefiniowanej w klasie A do klasy B.

W Ext JS dziedziczenie można wykonać za pomocą dwóch metod -

Ext. Extend

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

Tutaj nasza niestandardowa klasa StudentDetailsGrid korzysta z podstawowych funkcji GridPanel klasy Ext JS.

Korzystanie z miksów

Miksery to inny sposób używania klasy A w klasie B bez rozszerzenia.

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

Miksery są dodawane w kontrolerze, gdzie deklarujemy wszystkie inne klasy takie jak store, view itp. W ten sposób możemy wywołać klasę DepartmentUtils i używać jej funkcji w kontrolerze lub w tej aplikacji.