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는 확장없이 클래스 B에서 클래스 A를 사용하는 다른 방법입니다.

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

믹스 인은 저장소,보기 등과 같은 다른 모든 클래스를 선언하는 컨트롤러에 추가됩니다. 이러한 방식으로 DepartmentUtils 클래스를 호출하고 컨트롤러 또는이 응용 프로그램에서 해당 함수를 사용할 수 있습니다.