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では、2つの方法を使用して継承を行うことができます-

ext.extend

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

ここでは、カスタムクラスStudentDetailsGridがExt JSクラスGridPanelの基本機能を使用しています。

Mixinsを使用する

Mixinsは、拡張せずにクラスBでクラスAを使用する別の方法です。

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

ミックスインがコントローラーに追加され、ストア、ビューなどの他のすべてのクラスが宣言されます。このようにして、DepartmentUtilsクラスを呼び出して、コントローラーまたはこのアプリケーションでその機能を使用できます。

Extjs-class-system

目次