Ext.js-概要

Ext JSは、クロスブラウザー機能を備えたWebアプリケーションを構築するためのリッチUIを提供する人気のあるJavaScriptフレームワークです。 Ext JSは、基本的にデスクトップアプリケーションの作成に使用されます。 IE6 +、FF、Chrome、Safari 6 +、Opera 12+などのすべての最新ブラウザーをサポートしています。 Senchaの別の製品に対して、Sencha Touchはモバイルアプリケーションに使用されます。

Ext JSはMVC/MVVMアーキテクチャに基づいています。 Ext JS 6の最新バージョンは単一のプラットフォームであり、プラットフォームごとに異なるコードがなくてもデスクトップアプリケーションとモバイルアプリケーションの両方に使用できます。

歴史

Ext JS 1.1

Ext JSの最初のバージョンは、2006年にJack Slocumによって開発されました。これは、YUIの拡張であるユーティリティクラスのセットでした。彼はライブラリをYUI-extと名付けました。

Ext JS 2.0

Ext JSバージョン2.0は2007年にリリースされました。このバージョンには、機能が制限されたデスクトップアプリケーション用の新しいAPIドキュメントがありました。このバージョンには、Ext JSの以前のバージョンとの下位互換性がありません。

Ext JS 3.0

Ext JSバージョン3.0は2009年にリリースされました。このバージョンでは、グラフおよびリストビューとして新しい機能が追加されましたが、速度が犠牲になりました。バージョン2.0との後方互換性がありました。

Ext JS 4.0

Ext JS 3のリリース後、Ext JSの開発者は速度を上げるという大きな課題を抱えていました。 Ext JSバージョン4.0は2011年にリリースされました。構造が完全に改訂され、MVCアーキテクチャと高速アプリケーションがそれに続きました。

Ext JS 5.0

Ext JSバージョン5.0は2014年にリリースされました。このリリースでの主な変更は、MVCアーキテクチャをMVVMアーキテクチャに変更することでした。タッチ対応デバイスでデスクトップアプリを構築する機能、双方向のデータバインディング、レスポンシブレイアウト、およびその他の多くの機能が含まれています。

Ext JS 6.0

Ext JS 6は、Ext JS（デスクトップアプリケーション用）とSencha Touch（モバイルアプリケーション用）フレームワークをマージします。

特徴

以下は、Ext JSのハイライトされた機能です。

グリッド、ピボットグリッド、フォーム、チャート、ツリーなどの豊富なUIのコレクションを持つカスタマイズ可能なUIウィジェット。
古いバージョンと新しいバージョンのコードの互換性。
柔軟なレイアウトマネージャーは、複数のブラウザー、デバイス、および画面サイズにわたってデータとコンテンツの表示を整理するのに役立ちます。
Advanceデータパッケージは、UIウィジェットをデータレイヤーから分離します。データパッケージを使用すると、並べ替えやフィルタリングなどの機能を有効にする高機能モデルを使用して、クライアント側でデータを収集できます。
プロトコルに依存せず、任意のバックエンドソースからデータにアクセスできます。
カスタマイズ可能なテーマExt JSウィジェットは、プラットフォーム間で一貫した複数のすぐに使用可能なテーマで使用できます。

利点

Sencha Ext JSは、ビジネスグレードのWebアプリケーション開発の主要な標準です。 Ext JSは、デスクトップおよびタブレット向けの堅牢なアプリケーションを構築するために必要なツールを提供します。

デスクトップ、タブレット、スマートフォンでのクロスプラットフォーム開発を合理化-最新のブラウザーとレガシーブラウザーの両方に対応。
IDEプラグインを介してエンタープライズ開発環境に統合することにより、開発チームの生産性が向上します。
Webアプリケーション開発のコストを削減します。
チームが魅力的なユーザーエクスペリエンスを備えたアプリを作成できるようにします。
強力なUIを簡単に作成するための一連のウィジェットを提供します。
MVCアーキテクチャに準拠しているため、コードは非常に読みやすくなっています。

制限事項

ライブラリのサイズは大きく、約500 KBであるため、初期読み込み時間が長くなり、アプリケーションが遅くなります。
HTMLにはタグが多数含まれているため、デバッグが複雑で困難になります。
一般的なパブリックライセンスポリシーによると、オープンソースアプリケーションの場合は無料ですが、商用アプリケーションの場合は有料です。
単純なものでもロードするために、コーディングの数行が必要な場合があります。これは、プレーンhtmlまたはJQueryでより簡単です。
Ext JSアプリケーションの開発には、経験豊富な開発者が必要です。

道具

以下は、主に生産レベルでExt JSアプリケーション開発に使用されるSenchaが提供するツールです。

煎茶CMD

Sencha CMDは、Ext JSコードの縮小、スキャフォールディング、および実動ビルド生成の機能を提供するツールです。

Sencha IDEプラグイン

Sencha IDEプラグインは、SenchaフレームワークをIntelliJ、WebStorm IDEに統合し、コード補完、コード検査、コードナビゲーション、コード生成、コードリファクタリング、テンプレート作成、スペルチェックなどの機能を提供することにより、開発者の生産性の向上に役立ちます。

煎茶検査官

Sencha Inspectorは、開発中にデバッガが問題をデバッグするのに役立つデバッグツールです。

Ext.js-環境設定

ローカル環境のセットアップ

このセクションでは、マシンにExt JSをダウンロードしてセットアップする方法について説明します。手順に従って環境をセットアップしてください。

ライブラリファイルのダウンロード

Ext JSライブラリファイルの試用版をSencha https://www.sencha.comからダウンロードします。登録済みメールIDのサイトから試用版を取得します。これは、ext-6.0.1-trialという名前のzipフォルダーです。

フォルダーを解凍すると、アプリケーションに含めるさまざまなJavaScriptファイルとCSSファイルが見つかります。私たちは主に次のファイルを含めます-

JavaScriptファイル*-\ ext-6.0.1-trial \ ext6.0.1 \ buildフォルダーの下にあるJSファイルは-

Sr.No	File & Description
1	ext.js これは、アプリケーションを実行するためのすべての機能を含むコアファイルです。
2	ext-all.js このファイルには、ファイル内にコメントなしで縮小されたすべてのコードが含まれています。
3	ext-all-debug.js これは、デバッグ用のext-all.jsの縮小されていないバージョンです。
4	ext-all-dev.js このファイルも縮小されておらず、エラー/問題をチェックするためのすべてのコメントとコンソールログが含まれているため、開発目的で使用されます。
5	ext-all.js このファイルは、他のファイルよりもはるかに小さいため、主に本番目的で使用されます。

これらのファイルをプロジェクトのJSフォルダーに追加するか、システム内のファイルが存在する場所への直接パスを指定できます。

CSSファイル*-フォルダー\ ext6.0.1-trial \ ext-6.0.1 \ build \ classic \ theme-classic \ resources \ theme-classic-all.cssにあるテーマベースのファイルが多数あります
デスクトップアプリケーションを使用する場合は、フォルダー\ ext-6.0.1-trial \ ext-6.0.1 \ build \ classicの下のクラシックテーマを使用できます。
モバイルアプリケーションを使用する場合は、フォルダー\ ext-6.0.1-trial \ ext-6.0.1 \ build \ modernにある最新のテーマを使用できます。

次のライブラリファイルがExt JSアプリケーションに追加されます。

<html>
   <head>
      <link rel = "stylesheet" type = "text/css"
         href = "..\ext-6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css"/>
      <script type = "text/javascript"
         src = "..\ext-6.0.1-trial\ext-6.0.1\build\ext-all.js" > </script>
      <script type = "text/javascript" src = "app.js" > </script>
   </head>
</html>

ExtJSアプリケーションコードはapp.jsファイルに保持します。

CDNセットアップ

CDNは、Ext JSライブラリファイルをダウンロードする必要のないコンテンツ配信ネットワークです。代わりに、ExtJSのCDNリンクを次のようにプログラムに直接追加できます-

<html>
   <head>
      <link rel = "stylesheet" type = "text/css"
         href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"> </script>
      <script type = "text/javascript" src = "app.js" > </script>
   </head>
</html>

ブラウザ

Ext JSは、クロスブラウザの互換性をサポートしています。

IE 6以降
Firefox 3.6以降
Chrome10以降
Safari 4以降
Opera 11以降

Ext JSアプリケーションの実行には、任意のブラウザーを使用できます。

Ext.js-命名規則

命名規則は、識別子について従うべき規則のセットです。他のプログラマーにとってもコードを読みやすく理解しやすくします。

Ext JSの命名規則は、標準のJavaScript規則に従います。これは必須ではありませんが、従うのが良い習慣です。クラス、メソッド、変数、プロパティに名前を付けるキャメルケースの構文に従う必要があります。

名前が2つの単語と組み合わされている場合、2番目の単語は常に大文字で始まります。たとえば、doLayout（）、StudentForm、firstNameなど。

Name	Convention
Class Name	It should start with an uppercase letter, followed by camel case. For example, StudentClass
Method Name	It should start with a lowercase letter, followed by camel case. For example, doLayout()
Variable Name	It should start with a lowercase letter, followed by camel case. For example, firstName
Constant Name	It should be in uppercase only. For example, COUNT, MAX_VALUE
Property Name	It should start with a lowercase letter, followed by camel case. For example, enableColumnResize = true

Ext.js-アーキテクチャ

Ext JSはMVC/MVVMアーキテクチャに従います。

*MVC* -Model View Controllerアーキテクチャ（バージョン4）

*MVVM* -モデルビュービューモデル（バージョン5）

このアーキテクチャはプログラムに必須ではありませんが、この構造に従って、コードのメンテナンス性と編成性を高めることをお勧めします。

Ext JSアプリを使用したプロジェクト構造

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Ext JSアプリフォルダーは、プロジェクトのJavaScriptフォルダーにあります。

アプリには、app.jsを含むコントローラー、ビュー、モデル、ストア、およびユーティリティファイルが含まれます。

*app.js* -プログラムのフローが開始されるメインファイル。<script>タグを使用してメインHTMLファイルに含める必要があります。 アプリは、残りの機能のためにアプリケーションのコントローラーを呼び出します。

*Controller.js* -Ext JS MVCアーキテクチャのコントローラーファイルです。 これには、アプリケーションのすべての制御、イベントリスナー、およびコードのほとんどの機能が含まれます。 ストア、ビュー、モデル、必要、ミックスインなど、そのアプリケーションで使用される他のすべてのファイルに対して定義されたパスがあります。

*View.js* -アプリケーションのインターフェース部分が含まれ、ユーザーに表示されます。 Ext JSはさまざまなUIリッチビューを使用します。これらのビューは、要件に応じてここで拡張およびカスタマイズできます。

*Store.js* -モデルオブジェクトの助けを借りてビューにレンダリングされるローカルにキャッシュされたデータが含まれています。 ストアは、バックエンドデータを取得するサービス用に定義されたパスを持つプロキシを使用してデータを取得します。

*Model.js* -表示するストアデータをバインドするオブジェクトが含まれています。 ビューdataIndexへのバックエンドデータオブジェクトのマッピングがあります。 データは、ストアを使用して取得されます。

*Utils.js* -MVCアーキテクチャには含まれていませんが、コードをクリーンで複雑さを抑え、読みやすくするためのベストプラクティスです。 このファイルにメソッドを記述し、必要に応じてコントローラーまたはビューレンダラーでメソッドを呼び出すことができます。 コードの再利用性の目的にも役立ちます。

MVVMアーキテクチャでは、コントローラーはViewModelに置き換えられます。

*ViewModel* -基本的にビューとモデル間の変更を仲介します。 モデルからのデータをビューにバインドします。 同時に、ビューとの直接的な相互作用はありません。 モデルの知識しかありません。

使い方

たとえば、UIの2〜3か所で1つのモデルオブジェクトを使用している場合。 UIの1つの場所で値を変更すると、その変更を保存しなくても確認できます。モデルの値は変化するため、モデルを使用する場所に関係なく、UIのすべての場所に反映されます。

データのバインドに余分なコーディングが必要ないため、開発者の労力ははるかに少なく簡単になります。

Ext.js-最初のプログラム

この章では、Ext JSで最初のHello Worldプログラムを作成する手順をリストします。

ステップ1

選択したエディターでインデックスページを作成します。次のように、htmlページのheadセクションに必要なライブラリファイルを含めます。

索引

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>

   <body>
      <div id = "helloWorldPanel"/>
   </body>
</html>

説明

Ext JSがExt JS要素をレンダリングする準備ができたら、Ext.onReady（）メソッドが呼び出されます。
Ext.create（）メソッドは、Ext JSでオブジェクトを作成するために使用されます。ここでは、単純なパネルクラスExt.Panelのオブジェクトを作成しています。
Ext.Panelは、パネルを作成するためのExt JSの事前定義クラスです。
すべてのExt JSクラスには、いくつかの基本的な機能を実行するためのさまざまなプロパティがあります。

Ext.Panelクラスには、次のようなさまざまなプロパティがあります-

renderTo は、このパネルがレンダリングする必要がある要素です。 'helloWorldPanel’は、Indexlファイルのdiv idです。
Height および width プロパティは、パネルのサイズをカスタマイズするためのものです。
Title プロパティは、パネルにタイトルを提供することです。
Html プロパティは、パネルに表示されるHTMLコンテンツです。

ステップ2

標準のブラウザーでインデックスファイルを開くと、ブラウザーに次の出力が表示されます。

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クラスを呼び出して、コントローラーまたはこのアプリケーションでその機能を使用できます。

Ext.js-コンテナー

Ext JSのコンテナは、他のコンテナまたは子コンポーネントを追加できるコンポーネントです。これらのコンテナは、コンテナ内のコンポーネントを配置するために複数のレイアウトを持つことができます。コンテナおよびその子要素からコンポーネントを追加または削除できます。 Ext.container.Containerは、Ext JSのすべてのコンテナーの基本クラスです。

コンテナ

Sr.No

Description

1

Components inside Container

この例は、コンテナ内のコンポーネントを定義する方法を示しています

2

Container inside container

この例は、他のコンポーネントを持つコンテナ内にコンテナを定義する方法を示しています

Ext.panel.Panel、Ext.form.Panel、Ext.tab.Panel、およびExt.container.Viewportは、Ext JSで頻繁に使用されるコンテナーです。以下は、これらのコンテナの使用方法を示す例です。

Sr.No.	Type of Containers & Description
1	Ext.panel.Panel この例は、Ext.panel.Panelコンテナーを示しています
2	Ext.form.Panel この例は、Ext.form.Panelコンテナーを示しています
3	Ext.tab.Panel この例は、Ext.tab.Panelコンテナーを示しています
4	Ext.container.Viewport この例は、Ext.container.Viewportコンテナーを示しています

Ext.js-レイアウト

レイアウトは、コンテナ内での要素の配置方法です。水平、垂直、またはその他のいずれかです。 Ext JSのライブラリには異なるレイアウトが定義されていますが、カスタムレイアウトもいつでも作成できます。

Sr.No	Layout & Description
1	Absolute このレイアウトでは、コンテナ内のXY座標を使用してアイテムを配置できます。
2	Accordion このレイアウトにより、コンテナ内にすべてのアイテムをスタック形式で（一方が他方の上に）配置できます。
3	Anchor このレイアウトは、コンテナのサイズに関して各要素のサイズを指定する特権をユーザーに与えます。
4	Border このレイアウトでは、さまざまなパネルがネストされ、境界線で区切られています。
5	Auto これは、要素の数に基づいて要素のレイアウトを決定するデフォルトのレイアウトです。
6	Card(TabPanel) このレイアウトは、さまざまなコンポーネントをタブ形式で配置します。コンテナの上部にタブが表示されます。常に1つのタブのみが表示され、各タブは異なるコンポーネントと見なされます。
7	Card(Wizard) このレイアウトでは、コンテナスペース全体に要素が来るたびに。ウィザードには、ナビゲーション用の下部ツールバーがあります。
8	Column このレイアウトは、コンテナ内の複数の列を表示するためのものです。固定幅またはパーセント幅を列に定義できます。パーセント幅は、コンテナのフルサイズに基づいて計算されます。
9	Fit このレイアウトでは、コンテナは単一のパネルで満たされています。レイアウトに関連する特定の要件がない場合、このレイアウトが使用されます。
10	Table 名前が示すように、このレイアウトはコンポーネントをHTMLテーブル形式でコンテナに配置します。
11	vBox このレイアウトにより、要素を垂直に配置できます。これは最もよく使用されるレイアウトの1つです。
12	hBox このレイアウトにより、要素を水平方向に分散できます。

Ext.js-コンポーネント

ExtJS UIは、コンポーネントと呼ばれる1つまたは複数のウィジェットで構成されています。 Ext Jsには、要件に応じてカスタマイズできるさまざまなUIコンポーネントが定義されています。

Sr.No	Methods & Description
1	Grid グリッドコンポーネントを使用して、データを表形式で表示できます。
2	Form フォームウィジェットは、ユーザーからデータを取得することです。
3	Message Box メッセージボックスは、基本的に、アラートボックスの形式でデータを表示するために使用されます。
4	Chart グラフは、データを画像形式で表すために使用されます。
5	Tool tip ツールチップは、イベントが発生したときにいくつかの基本情報を表示するために使用されます。
6	Window このUIウィジェットは、イベントが発生したときにポップアップするウィンドウを作成するためのものです。
7	HTML editor HTMLエディターは非常に便利なUIコンポーネントの1つであり、ユーザーが入力するデータのフォント、色、サイズなどのスタイル設定に使用されます。
8	Progress bar バックエンド作業の進行状況を示します。

Ext.js-ドラッグアンドドロップ

ドラッグアンドドロップ機能は、開発者のタスクを簡単にするために追加された強力な機能の1つです。ドラッグ操作は、基本的に、マウスボタンを押したままマウスを移動しながら、UI要素のクリックジェスチャです。ドラッグ操作の後にマウスボタンを離すと、ドロップ操作が発生します。

構文

ドラッグアンドドロップクラスをドラッグ可能なターゲットに追加します。

var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
   isTarget: false
});

ドラッグアンドドロップターゲットクラスをドラッグ可能なターゲットに追加します。

var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
   ignoreSelf: false
});

例

以下は簡単な例です。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.application ({
            launch: function() {
               var images = Ext.get('images').select('img');
               Ext.each(images.elements, function(el) {
                  var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
                     isTarget: false
                  });
               });
            }
         });
         var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
            ignoreSelf: false
         });
      </script>

      <style>
         #content {
            width:600px;
            height:400px;
            padding:10px;
            border:1px solid #000;
         }
         #images {
            float:left;
            width:40%;
            height:100%;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
         }
         #mainRoom {
            float:left;
            width:55%;
            height:100%;
            margin-left:15px;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
         }
         .image {
            width:64px;
            height:64px;
            margin:10px;
            cursor:pointer;
            border:1px solid Black;
            display: inline-block;
         }
      </style>
   </head>

   <body>
      <div id = "content">
         <div id = "images">
            <img src = "/extjs/images/1.jpg" class = "image"/>
            <img src = "/extjs/images/2.jpg" class = "image"/>
            <img src = "/extjs/images/3.jpg" class = "image"/>
            <img src = "/extjs/images/4.jpg" class = "image"/>
            <img src = "/extjs/images/5.jpg" class = "image"/>
            <img src = "/extjs/images/6.jpg" class = "image"/>
            <img src = "/extjs/images/7.jpg" class = "image"/>
            <img src = "/extjs/images/8.jpg" class = "image"/>
         </div>
         <div id = "mainRoom"></div>
      </div>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

Extjsのドラッグアンドドロップを使用して、グリッドからグリッド、グリッドからフォームにデータを移動できます。以下は、グリッドとフォーム間でデータを移動する例です。

リンク：/extjs/extjs_grid_to_grid_dd [ドラッグアンドドロップ-グリッドからグリッド]

リンク：/extjs/extjs_grid_form_dd [ドラッグアンドドロップ-グリッドからフォーム]

Ext.js-テーマ

Ext.jsは、アプリケーションで使用される多くのテーマを提供します。クラシックテーマの代わりに別のテーマを追加して、出力の違いを確認できます。これは、先に説明したように、テーマCSSファイルを置き換えるだけで実行されます。

海王星のテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

次のCSSを追加して、Neptuneテーマを使用します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css

効果を確認するには、次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>

   <body>
      <div id = "helloWorldPanel"/>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

鮮明なテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

次のCSSを追加して、Neptuneテーマを使用します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css

効果を確認するには、次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>

   <body>
      <div id = "helloWorldPanel"/>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

トリトンのテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Tritonテーマを使用するには、次のCSSを追加します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css

効果を確認するには、次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>

   <body>
      <div id = "helloWorldPanel"/>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

灰色のテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Grayテーマを使用するには、次のCSSを追加します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css

効果を確認するには、次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>

   <body>
      <div id = "helloWorldPanel"/>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

Ext.js-カスタムイベントとリスナー

イベントは、クラスに何かが発生したときに発生するものです。たとえば、ボタンがクリックされたとき、または要素がレンダリングされる前/後に。

イベントの書き込み方法

リスナーを使用した組み込みイベント
後でイベントを添付する
カスタムイベント

リスナーを使用した組み込みイベント

Ext JSは、Ext JSファイルにイベントとカスタムイベントを書き込むためのリスナープロパティを提供します。

Ext JSでの書き込みリスナー*

listenプロパティをパネルに追加することにより、前のプログラム自体にリスナーを追加します。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',

               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button is clicked');
                  }
               }
            });
         });
      </script>
   </head>

   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel'/>   <!--  panel will be rendered here-- >
   </body>
</html>

上記のプログラムは、次の結果を生成します-

このようにして、listenersプロパティに複数のイベントを書き込むこともできます。

同じリスナー内の複数のイベント

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.get('tag2').hide()
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',

               listeners: {
                  click: function() {
                     this.hide();
                  },
                  hide: function() {
                     Ext.get('tag1').hide();
                     Ext.get('tag2').show();
                  }
               }
            });
         });
      </script>
   </head>

   <body>
      <div id = "tag1">Please click the button to see event listener.</div>
      <div id = "tag2">The button was clicked and now it is hidden.</div>
      <div id = 'helloWorldPanel'/>   <!--  panel will be rendered here-- >
   </body>
</html>

後でイベントを添付する

イベントを記述する以前の方法では、要素の作成時にリスナーでイベントを記述しました。もう1つの方法は、イベントを添付することです。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button'
            });

           //This way we can attach event to the button after the button is created.
            button.on('click', function() {
               Ext.MessageBox.alert('Alert box', 'Button is clicked');
            });
         });
      </script>
   </head>

   <body>
      <p> Please click the button to see event listener </p>
      <div id = 'helloWorldPanel'/>   <!--  panel will be rendered here-- >
   </body>
</html>

上記のプログラムは、次の結果を生成します-

カスタムイベント

Ext JSでカスタムイベントを記述し、fireEventメソッドでイベントを発生させることができます。次の例では、カスタムイベントを記述する方法について説明します。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',

               listeners: {
                  myEvent: function(button) {
                     Ext.MessageBox.alert('Alert box', 'My custom event is called');
                  }
               }
            });
            Ext.defer(function() {
               button.fireEvent('myEvent');
            }, 5000);
         });
      </script>
   </head>

   <body>
      <p> The event will be called after 5 seconds when the page is loaded. </p>
      <div id = 'helloWorldPanel'/>   <!--  panel will be rendered here-- >
   </body>
</html>

ページが読み込まれ、ドキュメントの準備が整うと、ボタンのあるUIページが表示され、5秒後にイベントを発生させると、ドキュメントの準備が整います。 5秒後に警告ボックスが表示されます。

ここでは、カスタムイベント「myEvent」を作成し、button.fireEvent（eventName）;としてイベントを発生させています。

Ext.js-データ

データパッケージは、アプリケーション内のすべてのデータをロードおよび保存するために使用されます。

データパッケージには多数のクラスがありますが、最も重要なクラスは次のとおりです-

モデル
格納
プロキシ

モデル

モデルの基本クラスは Ext.data.Model です。アプリケーション内のエンティティを表します。表示するストアデータをバインドします。バックエンドデータオブジェクトのビューdataIndexへのマッピングがあります。データは、ストアを使用して取得されます。

モデルを作成する

モデルを作成するには、Ext.data.Modelクラスを拡張し、フィールド、名前、マッピングを定義する必要があります。

Ext.define('StudentDataModel', {
   extend: 'Ext.data.Model',
   fields: [
      {name: 'name', mapping : 'name'},
      {name: 'age', mapping : 'age'},
      {name: 'marks', mapping : 'marks'}
   ]
});

ここで、名前はビューで宣言するdataIndexと同じである必要があり、マッピングは、storeを使用してフェッチされるデータベースからの静的または動的なデータと一致する必要があります。

格納

ストアの基本クラスは Ext.data.Store です。これには、ローカルにキャッシュされたデータが含まれており、モデルオブジェクトの助けを借りてビューにレンダリングされます。ストアは、プロキシを使用してデータを取得します。プロキシには、バックエンドデータを取得するサービス用に定義されたパスがあります。

ストアデータは、静的または動的の2つの方法で取得できます。

静的ストア

静的ストアの場合、次のコードに示すように、すべてのデータがストアに存在します。

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   data: [
      { name : "Asha", age : "16", marks : "90" },
      { name : "Vinit", age : "18", marks : "95" },
      { name : "Anand", age : "20", marks : "68" },
      { name : "Niharika", age : "21", marks : "86" },
      { name : "Manali", age : "22", marks : "57" }
   ];
});

ダイナミックストア

プロキシを使用して動的データを取得できます。 Ajax、Rest、Jsonからデータを取得できるプロキシを使用できます。

プロキシ

プロキシの基本クラスはExt.data.proxy.Proxyです。モデルデータの読み込みと保存を処理するために、モデルとストアがプロキシを使用します。

プロキシには2つのタイプがあります

クライアントプロキシ
サーバープロキシ

クライアントプロキシ

クライアントプロキシには、HTML5ローカルストレージを使用したメモリとローカルストレージが含まれます。

サーバープロキシ

サーバープロキシは、Ajax、Jsonデータ、Restサービスを使用して、リモートサーバーからのデータを処理します。

サーバーでのプロキシの定義

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   proxy : {
      type : 'rest',
      actionMethods : {
         read : 'POST' //Get or Post type based on requirement
      },
      url : 'restUrlPathOrJsonFilePath',//here we have to include the rest URL path
     //which fetches data from database or Json file path where the data is stored
      reader: {
         type : 'json', //the type of data which is fetched is of JSON type
         root : 'data'
      },
   }
});

Ext.js-フォント

Ext.jsは、異なるフォントパッケージを使用する機能を提供します。フォントパッケージは、パッケージで使用可能なアイコンのさまざまなクラスを追加するために使用されます。

素晴らしいフォント
フォントピクト

素晴らしいフォント

ExtJSの新しいテーマであるTritonには、フレームワーク自体に組み込みのフォントファミリfont-awesomeが含まれているため、font-awesomeスタイルシートの明示的な要件は必要ありません。

以下は、TritonテーマでFont-Awesomeクラスを使用する例です。

リンク：/extjs/extjs_font_awesome_triton_theme [Font-Awesome with Triton theme]

Triton以外のテーマを使用する場合、font-awesomeのスタイルシートを明示的に追加する必要があります。

以下は、TritonテーマなしでFont-Awesomeクラスを使用する例です。

link：/extjs/extjs_font_awesome_normal_theme [通常のテーマのフォント-すごい（Tritonテーマ以外のテーマ）]

フォントピクト

Font-pictosはExtJSのフレームワークに含まれていないため、同じものを要求する必要があります。フォントピクトを使用するメリットがあるのは、Senchaのライセンスを取得したユーザーのみです。

Font-Pictosを追加する手順

ステップ1 *-次のコマンドを使用してfont-pictosクラスを要求します。

"requires": ["font-pictos"]

ステップ2 *-pictosクラスを次のように追加します-

iconCls: 'pictos pictos-home'

Ext.js-スタイル

アプリケーションスタイリングとは、コンポーネントのルックアンドフィールをユーザーが調整することです。これらの調整には、色、色のグラデーション、フォント、マージン/パディングなどが含まれます。 Ext JS 6には、アプリケーションをスタイリングする新しい方法があります。

スタイリングにSCSSを使用します。 SCSSは、CSSコードを記述するより動的な方法です。これを利用して、スタイルシートに変数を書き込むことができます。ただし、ブラウザはSCSSを理解できません。 CSSのみを理解できるため、すべてのSCSSファイルをCSSにコンパイルして、本番用のコードを作成する必要があります。

したがって、SCSSファイルはプリプロセッサファイルと呼ばれます。 Ext.jsでは、コンパイルはSencha CMDツールを介して行われます。 Sencha CMDは、次のコマンドを使用して一度だけ手動でコンパイルします。

sencha app build [development]

Global_CSSはメインCSSファイルであり、必要に応じて異なる値を提供することでテーマをカスタマイズするためにアプリケーションで使用できるすべてのSCSS変数がExtJSに関連付けられています。

以下は、Ext.jsのGlobal_CSSで使用可能なCSS変数の一部です。

Sr.No	Variable & Description
1	$base-color $ base-color：色（例： $ base-color：＃808080）この基本色は、テーマ全体で使用されます。
2	$base-gradient $ base-gradient：string（e.g. $ base-gradient： 'matte'）このベースグラデーションは、テーマ全体で使用されます。
3	$body-background-color $ body-background-color：色（例： $ body-background-color：＃808080） body要素に適用する背景色。透明または「なし」に設定すると、body要素に背景色のスタイルは設定されません。
4	$color $ color：色（例： $ color：＃808080）このデフォルトのテキスト色は、テーマ全体で使用されます。
5	$font-family $ font-family：文字列（例： $ font-family：arial）このデフォルトのフォントファミリは、テーマ全体で使用されます。
6	$font-size $ font-size：number（e.g. $ font-size：9px）このデフォルトのフォントサイズは、テーマ全体で使用されます。
7	$font-weight $ font-weight：string/number（e.g. $ font-weight：normal）このデフォルトのフォントの太さは、テーマ全体で使用されます。
8	$font-weight-bold $ font-weight-bold：文字列/数値（例： $ font-weight-bold：太字）この太字フォントのデフォルトのフォントウェイトは、テーマ全体で使用されます。
9	$include-chrome $ include-chrome：boolean（e.g. $ include-chrome：true） Chrome固有のルールを含める場合はTrue。
10	$include-ff $ include-ff：ブール値（例： $ include-ff：true） Firefox固有のルールを含める場合はTrue。
11	$include-ie $ include-ie：boolean（e.g. $ include-ie：true） IE9以前のInternet Explorer固有のルールを含める場合はTrue。
12	$include-opera $ include-opera：boolean（e.g. $ include-opera：true） Opera固有のルールを含める場合はTrue。
13	$include-safari $ include-safari：boolean（e.g. $ include-safari：true） Opera固有のルールを含める場合はTrue。
14	$include-webkit $ include-webkit：boolean（e.g. $ include-webkit：true） Webkit固有のルールを含める場合はTrue。

Ext.js-描画

ExtJSの描画パッケージを使用すると、汎用グラフィックスを描画できます。これは、すべてのブラウザーとモバイルデバイスで動作するグラフィックスに使用できます。

Sr.No	Drawing
1	Circle このグラフィックは、円の形状を作成するために使用されます。
2	Rectangle このグラフィックは、長方形の形状を作成するために使用されます。
3	Arc このグラフィックは、円弧形状を作成するために使用されます。
4	Ellipse このグラフィックは、楕円形を作成するために使用されます。
5	EllipticalArc このグラフィックは、楕円弧形状を作成するために使用されます。
6	Image このグラフィックは、アプリケーションに画像を追加するために使用されます。
7	Path このグラフィックは、フリーパスを作成するために使用されます。
8	Text このグラフィックは、アプリケーションにテキストを追加するために使用されます。
9	Translate after render このプロパティは、グラフィックがレンダリングされた後、コンテナ内の開始点を移動するために使用されます。任意のグラフィックで使用できます。
10	Rotation このプロパティは、追加された図面に回転を追加するために使用されます。任意のグラフィックで使用できます。
11	Square このグラフィックは、正方形を作成するために使用されます。

Ext.js-ローカリゼーション

ユーザーが理解し、好む言語でコミュニケーションを取ることが常に最善です。 Extjsローカリゼーションパッケージは、ドイツ語、フランス語、韓国語、中国語などの40以上の言語をサポートしています。 ExtJsでロケールを実装するのは非常に簡単です。 ext-localeパッケージのオーバーライドフォルダーにバンドルされているすべてのロケールファイルがあります。ロケールファイルは、特定のコンポーネントのデフォルトの英語値を置き換えるようにExt JSに指示するオーバーライドのみを行います。

次のプログラムは、異なるロケールで月を表示して効果を確認するものです。次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
            var ds = Ext.create('Ext.data.Store', {
               fields: ['month'],
               remoteSort: true,
               pageSize: 6,

               proxy: {
                  type: 'memory',
                  enablePaging: true,
                  data: monthArray,
                  reader: {type: 'array'}
               }
            });
            Ext.create('Ext.grid.Panel', {
               renderTo: 'grid',
               id : 'gridId',
               width: 600,
               height: 200,
               title:'Month Browser',

               columns:[{
                  text: 'Month of the year',
                  dataIndex: 'month',
                  width: 300
               }],
               store: ds,
               bbar: Ext.create('Ext.toolbar.Paging', {
                  pageSize: 6,
                  store: ds,
                  displayInfo: true
               })
            });
            Ext.getCmp('gridId').getStore().load();
         });
      </script>
   </head>

   <body>
      <div id = "grid"/>
   </body>
</html>

上記のプログラムは次の結果を生成します

英語以外の異なるロケールを使用するには、プログラムにロケール固有のファイルを追加する必要があります。ここでは、フランス語用のhttps://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.jsを使用しています。韓国語などのhttps://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.jsなど、言語ごとに異なるロケールを使用できます。

次のプログラムは、韓国語ロケールで日付ピッカーを表示して効果を確認するものです。次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.picker.Date', {
               renderTo: 'datePicker'
            });
         });
      </script>
   </head>

   <body>
      <div id = "datePicker"/>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

次の表に、ExtJSで使用可能ないくつかのロケールと、変更するメインファイルのロケールURLを示します。

Locale	Language	Locale URL
ko	Korean	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js
fr	French	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js
es	Spanish	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js
ja	Japanese	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js
it	Italian	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js
ru	Russian	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js
zh_CN	Simplifies Chinese	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js

Ext.js-アクセシビリティ

一般的に、アクセシビリティとは可用性を意味し、コンテンツはアクセシビリティとはコンテンツが利用可能であるという意味です。

ソフトウェアの用語では、アプリケーションはアクセス可能です。つまり、アプリケーションはすべてのユーザーが利用できます。ここでは、すべて障害者、視覚障害者、またはスクリーンリーダーを使用してコンピューターを使用するユーザー、またはマウスではなくキーボードを使用してナビゲートすることを好むユーザーを意味します。マウスを使用する代わりにキーボードを使用したナビゲーション。

アクセス可能なアプリケーションは、ARIA（Accessible Rich Internet Application）と呼ばれます。

Ext JSのアクセシビリティ

Ext JSは、すべてのキーボードナビゲーションで機能することを念頭に置いて設計されています。タブインデックスとフォーカス機能が組み込まれています。デフォルトでは常にオンになっているため、この機能を有効にするためにプロパティを追加する必要はありません。

この機能により、キーボード対応のすべてのコンポーネントは、タブを押すとユーザーと対話できます。たとえば、マウスの代わりにタブを使用して次のコンポーネントに移動できます。同様に、Shift + Tabキーを使用して後方に移動し、キーボードのEnterキーを使用してクリックなどを行うことができます。

フォーカススタイリングとタブ

Tabキーを押すためにキーストロークを使用すると、Extjsにフォーカスが組み込まれます。

次の例は、タブでフォーカスが変更されたときのスタイルの変更方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function(){
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button1'),
               text: 'Button1',

               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 1 is clicked');
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button2'),
               text: 'Button2',

               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 2 is clicked');
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button3'),
               text: 'Button3',

               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 3 is clicked');
                  }
               }
            });
         });
      </script>
   </head>

   <body> <p>Please click the button to see event listener:</p>
      <span id = "button3"/>
      <span id = "button2"/>
      <span id = "button1"/>
   </body>
</html>

効果を確認するには、[次へ]ボタンから移動するにはタブを使用し、後方にフォーカスするにはshft + tabを使用します。 Enterキーを使用して、フォーカスされたボタンに関連するアラートがポップアップする方法を確認します。

ARIAテーマ

ExtJSは視覚障害者向けのテーマアリアを提供します。

次の例は、視覚障害者が簡単にアクセスできるariaテーマを示しています。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-aria/resources/theme-aria-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.require([
            'Ext.grid.*',
            'Ext.data.*'
         ]);

        //Creation of data model
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'name', mapping : 'name'},
               {name: 'age', mapping : 'age'},
               {name: 'marks', mapping : 'marks'}
            ]
         });

         Ext.onReady(function() {
           //Store data
            var myData = [
               { name : "Asha", age : "16", marks : "90" },
               { name : "Vinit", age : "18", marks : "95" },
               { name : "Anand", age : "20", marks : "68" },
               { name : "Niharika", age : "21", marks : "86" },
               { name : "Manali", age : "22", marks : "57" }
            ];

           //Creation of first grid store
            var firstGridStore = Ext.create('Ext.data.Store', {
               model: 'StudentDataModel',
               data: myData
            });

           //Creation of first grid
            var firstGrid = Ext.create('Ext.grid.Panel', {
               store            : firstGridStore,
               columns          :
               [{
                  header: "Student Name",
                  dataIndex: 'name',
                  id : 'name',
                  flex:  1,
                  sortable: true
               },{
                  header: "Age",
                  dataIndex: 'age',
                  flex: .5,
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5,
                  sortable: true
               }],
               stripeRows       : true,
               title            : 'First Grid',
               margins          : '0 2 0 0'
            });

           //Creation of a panel to show both the grids.
            var displayPanel = Ext.create('Ext.Panel', {
               width        : 600,
               height       : 200,

               layout       : {
                  type: 'hbox',
                  align: 'stretch',
                  padding: 5
               },
               renderTo     : 'panel',
               defaults     : { flex : 1 },
               items        : [
                  firstGrid
               ]
            });
         });
      </script>
   </head>

   <body>
      <div id = "panel" > </div>
   </body>
</html>

上記のプログラムは、次の結果を生成します。タブとマウスの上下キーを使用して、フォーカスをグリッド全体に移動できます。テーマは基本的に視覚障害者向けです。

Ext.js-Ext JSコードのデバッグ

JavaScriptコードは、* alert（）ボックスまたは console.log（）*を使用して、またはデバッガーのデバッグポインターを使用してデバッグできます。

アラートボックス

フローまたは変数値を確認するコードにアラートボックスを配置します。たとえば、alert（ 'show message to show' + variable）;

開発/デバッグツール

デバッガは、開発者が開発中にコードの問題とエラーをチェックするための最も重要なツールです。

Ext JSはJavaScriptフレームワークであるため、さまざまなブラウザーによって提供される、またはさまざまなブラウザーに固有の開発者ツールを使用して簡単にデバッグできます。すべての主要なブラウザには、JavaScriptコードをテストおよびデバッグするための開発者ツールが用意されています。

人気のあるデバッガーは、IE用のIE開発ツール、firefox用のfirebug、およびChromeブラウザー用のchrome開発ツールです。

ChromeデバッガーにはChromeブラウザーが付属していますが、firebugにはパッケージとして付属していないため、firebugを特にインストールする必要があります。

以下は、Firefoxブラウザ用のfirebugをインストールするためのリンクです。http：//getfirebug.com

Windows OSで開発ツールを開くショートカットは、F12キーボードキーです。

デバッガーでのJSコードのデバッグ

JavaScriptコードをデバッグするには2つの方法があります。

最初の方法は、コードに* console.log（）*を配置し、ログの値を確認することです。これは、開発ツールのコンソールに出力されます。
2番目の方法は、開発ツールでブレークポイントを使用することです。プロセスは次のとおりです。
scriptタグの下にある利用可能なすべてのスクリプトでファイルを開きます。
次に、デバッグする行にブレークポイントを配置します。
ブラウザでアプリケーションを実行します。
ここで、コードフローがこの行に到達するたびに、ユーザーがキーF6（コードの次の行に移動）、F7（関数内に移動）、またはF8（移動）デバッグするフローに基づいて、次のブレークポイントに進むか、ブレークポイントがもうない場合はコードを実行します）。
値を表示する変数または関数を選択できます。
コンソールを使用して、値を確認したり、ブラウザ自体の一部の変更を確認したりできます。

Ext.js-メソッド

以下は、Ext JSで頻繁に使用されるいくつかの組み込み関数です。

Ext.isクラス

このクラスは、使用しているプラットフォームが電話かデスクトップか、MacまたはWindowsオペレーティングシステムかをチェックします。これらは、Ext.isクラスに関連する以下のメソッドです。

Sr.No	Methods & Description
1	Ext.is.Platforms この関数は、このバージョンで使用可能なプラットフォームを返します。たとえば、次の関数を実行すると、次のようなものが返されます- [Object { property = "platform", regex = RegExp, identity = "iPhone"}, Object { property = "platform", regex = RegExp, identity = "iPod"}, Object { property = "userAgent", regex = RegExp, identity = "iPad"}, Object { property = "userAgent", regex = RegExp, identity = "Blackberry"}, Object { property = "userAgent", regex = RegExp, identity = "Android"}, Object { property = "platform", regex = RegExp, identity = "Mac"}, Object { property = "platform", regex = RegExp, identity = "Windows"}, Object { property = "platform", regex = RegExp, identity = "Linux"}]
2	Ext.is.Android この関数は、Androidオペレーティングシステムを使用している場合はtrueを返し、そうでない場合はfalseを返します。
3	Ext.is.Desktop この関数は、アプリケーションにデスクトップを使用している場合はtrueを返し、それ以外の場合はfalseを返します。
4	Ext.is.Phone この関数は、モバイルを使用している場合はtrueを返し、そうでない場合はfalseを返します。
5	Ext.is.iPhone この関数は、iPhoneを使用している場合はtrueを返し、そうでない場合はfalseを返します。
6	Ext.is.iPod この関数は、iPodを使用している場合はtrueを返し、そうでない場合はfalseを返します。
7	Ext.is.iPad iPadを使用している場合、この関数はtrueを返し、そうでない場合はfalseを返します。
8	Ext.is.Windows この関数は、Windowsオペレーティングシステムを使用している場合はtrueを返し、それ以外の場合はfalseを返します。
9	Ext.is.Linux この関数は、Linuxオペレーティングシステムを使用している場合はtrueを返し、そうでない場合はfalseを返します。
10	Ext.is.Blackberry この関数は、Blackberryを使用している場合はtrueを返し、そうでない場合はfalseを返します。
11	Ext.is.Mac この関数は、Macオペレーティングシステムを使用している場合はtrueを返し、それ以外の場合はfalseを返します。

Ext.supportsクラス

名前が示すように、このクラスは、機能がブラウザ/デバイスの現在の環境でサポートされているかどうかの情報を提供します。

Sr.No	Methods & Description
1	Ext.supports.History デバイスがHTML 5履歴をwindow.historyとしてサポートしているかどうかを確認します。デバイスが履歴をサポートしている場合、 true を返し、そうでない場合はfalseを返します。
2	Ext.supports.GeoLocation デバイスがジオロケーション方式をサポートしているかどうかを確認します。内部的にはnavigator.geolocationメソッドをチェックします。
3	Ext.supports.Svg デバイスがHTML 5機能のスケーラブルベクターグラフィックス（svg）メソッドをサポートしているかどうかを確認します。内部的にはdoc.createElementNS && !! doc.createElementNS（ "http：/" + "/www.w3.org/2000/svg"、 "svg"）。createSVGRectをチェックします。
4	Ext.supports.Canvas デバイスがメソッドを描画するためにHTML 5機能キャンバスをサポートしているかどうかを確認します。内部的にはdoc.createElement（ 'canvas'）。getContextをチェックし、このメソッドの出力に基づいて値を返します。
5	Ext.supports.Range ブラウザがdocument.createRangeメソッドをサポートしているかどうかを確認します。

Ext.Stringクラス

Ext.Stringクラスには、文字列データを操作するためのさまざまなメソッドがあります。最も使用される方法は、エンコードのデコード、トリム、トグル、urlAppendなどです。

エンコードデコード関数-これらは、HTML値をエンコードおよびデコードするためにExt.Stringクラスで利用可能な関数です。


Ext.StringlEncode("< p > Hello World </p >");
Output - "&lt; p &gt; Hello World &lt;/p &gt;".
Ext.StringlDecode("&lt; p &gt; Hello World &lt;/p &gt;");
Output -  "< p > Hello World </p &gt"
Ext.String.trim('      hello      ');
Output – "hello"
Ext.String.urlAppend('https://www.google.com' , 'hello');
Output - "https://www.google.com?hello"
Ext.String.urlAppend('https://www.google.com?index=1' , 'hello');
Output – "https://www.google.com?index=1&hello"
var toggleString = 'ASC'
toggleString = Ext.String.toggle(a, 'ASC', 'DESC');
Output – DESC as toggleString had value ASC. Now again, if we
print the same we will get toggleString = “ASC” this time, as
it had value 'DESC'.
It is similar to ternary operator
toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );

その他の方法

Sr.No	Methods & Description
1	Ext.userAgent() この関数は、ブラウザのuserAgentに関する情報を提供します。 UserAgentは、Webサーバーに対してブラウザとオペレーティングシステムを識別することです。例-Mozillaで作業している場合、「mozilla/5.0（windows nt 6.1; wow64; rv：43.0）gecko/20100101 firefox/43.0」のような結果が返されます。
2	Version related function この関数は、IEに関連して呼び出された場合、現在使用中のブラウザーのバージョンを返します。 Firefoxブラウザーでは、0を返します。これらの関数は、Ext.firefoxVersion、Ext.ieVersionなどです。例-Firefoxブラウザを使用していて、IEのバージョンを取得するメソッドExt.ieVersionを呼び出すと、0が返されます。 IEブラウザで同じメソッドを使用している場合、8、9など、使用しているバージョンが返されます。
3	Ext.getVersion() この関数は、使用中の現在のExt JSバージョンを返します。例-Ext.getVersion（）を呼び出すと、バージョン、ショートバージョンなどの値の配列を返します。 Ext.getVersion（）。versionは、プログラムで使用されているExt JSの現在のバージョン（「4.2.2」など）を返します。
4	Browser related functions これらの関数は、使用中のブラウザに基づいてブール値を返します。これらのメソッドは、Ext.isIE、Ext.isIE6、Ext.isFF06、およびExt.isChromeです。例-Chromeブラウザを使用している場合、Ext.isChrome関数はすべてtrueを返し、そうでない場合はfalseを返します。
5	Ext.typeOf() この関数は、変数のデータ型を返します。例- `var a = 5; var b = 'hello'; Ext.typeOf(a); Output – Number Ext.typeOf(b); Output - String`
6	DataType related methods − These functions return boolean value based on the datatype of the variable 例- `var a = ['a', 'bc']; var b = 'hello'; var c = 123; var emptyVariable; var definedVariable; function extraFunction(){return true;}`

Ext.js-質問と回答

Ext JSとは何ですか？

Ext JSは拡張JavaScriptの略です。リッチUI Webベースのデスクトップアプリケーションを開発するためのJavaScriptフレームワークです。

Ext JSはどのライブラリで拡張されますか？

YUI（Yahooユーザーインターフェイス）から拡張されたSencha製品です。

HTMLページに追加するメインライブラリファイルは何ですか？

これらは、Ext JSコードを実行するためにHTMLページに含める主なファイルです-

ext-all.js
ext-all.css

Ext JSの機能を説明します。

グリッド、ピボットグリッド、フォーム、チャート、ツリーなどの豊富なUIのコレクションを持つカスタマイズ可能なUIウィジェット。
古いバージョンと新しいバージョンのコードの互換性。
柔軟なレイアウトマネージャーは、複数のブラウザー、デバイス、および画面サイズにわたってデータとコンテンツの表示を整理するのに役立ちます。
Advanceデータパッケージは、UIウィジェットをデータレイヤーから分離します。データパッケージを使用すると、並べ替えやフィルタリングなどの機能を有効にする高機能モデルを使用して、クライアント側でデータを収集できます。
プロトコルに依存せず、任意のバックエンドソースからデータにアクセスできます。
カスタマイズ可能なテーマExt JSウィジェットは、プラットフォーム間で一貫した複数のすぐに使用可能なテーマで使用できます。

Ext JSを使用する利点を説明します。

最新のブラウザとレガシーブラウザの両方で、デスクトップ、タブレット、スマートフォンにわたるクロスプラットフォーム開発を合理化します。
IDEプラグインを介してエンタープライズ開発環境に統合することにより、開発チームの生産性が向上します。
Webアプリケーション開発のコストを削減します。
チームが魅力的なユーザーエクスペリエンスを備えたアプリを作成できるようにします。
UIを強力かつ簡単にするための一連のウィジェットがあります。
MVCアーキテクチャに準拠しているため、コードが非常に読みやすくなります。

Ext JSの使用の制限について説明します。

ライブラリのサイズは約500 KBと大きいため、初期読み込み時間が長くなり、アプリケーションが遅くなります。
HTMLは<DIV>タグでいっぱいであるため、デバッグが複雑で困難になります。
一般的なパブリックライセンスポリシーによると、オープンソースアプリケーションの場合は無料ですが、商用アプリケーションの場合は有料です。
単純なものでさえロードするために、数行のコーディングが必要な場合がありますが、これはプレーンなhtmlまたはJqueryでより簡単です。
Ext JSアプリケーションの開発には、経験豊富な開発者が必要です。

Ext JSがサポートするブラウザーは何ですか？

Ext JSはクロスブラウザの互換性をサポートし、すべての主要なブラウザを次のようにサポートします-

IE 6以降
Firefox 3.6以降
Chrome10以降
Safari 4以降
Opera 11以降

Ext JSはどのアーキテクチャをサポートしていますか？

Ext JS 4+は、MVC（Model View Controller）アーキテクチャをサポートしています。 Ext JS 5からMVVM（Model View Viewmodel）のサポートも開始しました。

Ext JSの最新バージョンとその利点は何ですか？

Ext JS 6は、Ext JSの最新バージョンであり、デスクトップアプリケーションとモバイルアプリケーションの両方で使用できるという大きな利点があります。基本的には、Ext JS（デスクトップアプリケーション）とSencha touch（モバイルアプリケーション）のマージです。

初めて使用する開発者へのアドバイス。

Ext JSはJavaScriptフレームワークであるため、使用を開始するには、HTMLとJSの予備知識が必要です（エキスパートレベルではなく、基本的な理解が必要です）。その後、基本を理解するために時間がかかるので、徐々に学習してください。

Ext JSとjQueryの違い。

Ext JSは本格的なUIリッチフレームワークであるため、両方のフレームワークはまったく異なり、Ext JSとjQuery UIを比較できます。ただし、Ext JSにはjQuery UIよりもはるかに多くのコンポーネントがあります。

Ext JSとAngular JSの違い。

Parameter	Ext JS	Angular JS
Rich UI	Ext JS provides rich UI options such as forms , grid, charts	Angular JS does not provide rich UI inbuilt
Rich theme UI components	Ext JS provides multiple themes inbuilt	Angular JS does not provide Rich UI it has to be integrated with AngularUI, AngularBootstarp etc.
Cross browser compatibility	Ext JS provide cross browser compatibility it works for almost all the browsers IE6+, FF, Chrome, Safari, Opera etc.	Angular JS has to use third party library such as jQuery, jqLite for solving this purpose.
Automatic testing support	Possible only with external tools	Provides inbuilt.
Two way data binding	In Ext JS 5 two way binding is included.	It supports two way binding start from first version.
Performance	Ext JS is comparatively heavier and slower.	Angular JS is light weight framework than Ext JS
Build tools	Ext JS uses Sencha cmd tool for builds	Angular JS uses third party tools such as grunt.

Ext JSのさまざまなバージョンについて何を知っていますか？

*Ext JS 1.1*

Ext JSの最初のバージョンは、2006年にJack Slocumによって開発されました。 YUIの拡張であるユーティリティクラスのセットでした。彼はライブラリをYUI-extと名付けました。

*Ext JS 2.0*

Ext JSバージョン2.0は2007年にリリースされました。このバージョンには、機能が制限されたデスクトップアプリケーション用の新しいAPIドキュメントがありました。このバージョンには、Ext JSの以前のバージョンとの下位互換性がありませんでした。

*Ext JS 3.0*

Ext JSバージョン3.0は2009年にリリースされました。このバージョンでは、グラフおよびリストビューとして新しい機能が追加されましたが、速度が犠牲になりました。バージョン2.0との後方互換性がありました。

*Ext JS 4.0*

Ext JS 3のリリース後、Ext JSの開発者は速度を上げるという大きな課題を抱えていました。 Ext JSバージョン4.0は2011年にリリースされました。完全に改訂された構造で、MVCアーキテクチャと迅速なアプリケーションがそれに続きました。

*Ext JS 5.0*

Ext JSバージョン5.0は2014年にリリースされました。このリリースでの主な変更は、MVCアーキテクチャをMVVMアーキテクチャに変更することでした。タッチ対応デバイスでデスクトップアプリを構築する機能、双方向のデータバインディング、レスポンシブレイアウトなどの機能が含まれています。

*Ext JS 6.0*

Ext JS 6は、Ext JS（デスクトップアプリケーション用）とsencha touch（モバイルアプリケーション用）フレームワークをマージします。

異なるExt JSコンポーネントとは何ですか？

Ext JSにはさまざまなUIコンポーネントがあり、主に使用されるコンポーネントの一部は-

Grid
Form
メッセージボックス
プログレスバー
ツールチップ
窓
HTMLエディタ
チャート

Ext JSのxTypeとは何ですか？

xTypeは、Ext JS UIコンポーネントのタイプを定義します。これは、コンポーネントのレンダリング中に決定されます。 E.g. textField、数値、ボタンなど

Ext JSのvTypeとは何ですか？

これは検証タイプであり、簡単にカスタマイズできます。 Ext JSが提供するvTypeはほとんどありません-

*alphanumText* -入力されたテキストにアルファベットまたは数値以外の記号がある場合、これはfalseを返します。

*emailText* -テキストが有効なメールアドレスでない場合、これはfalseを返します。

Ext JSをAjaxと統合できますか？

はい、Ext JSはAjaxと統合できます。実装：ぼかし後のテキストボックスで、テキストボックスに入力されたデータがサーバー/データベースに存在するかどうかを確認するために、テキストボックスIDに対してonblur/onchangeを呼び出すAjax呼び出しを行うために、サーバーからのデータを検証する必要があるとします。

Ext JSは他のサーバー側フレームワークと統合できますか？

はい、Ext JSは、Java、.net、Ruby on rails、PHP、ColdFusionなど、他のサーバー側フレームワークと統合できます。

Ext JS実装ツールについて説明します。

Ext JSは、Eclipse、Aptana、Sublime、Webstromなどの一般的な統合開発環境（IDE）に実装できます。

Ext JSでDOM要素にアクセスする方法は何ですか？

これらは、Ext JSでDOM要素にアクセスするいくつかの方法です-

Ext.get（）
Ext.getElementById（）
Ext.fly（）
Ext.select（）

MVVMアーキテクチャのViewmodelとは何ですか？

MVVMアーキテクチャは、モデルビュービューモデルです。 MVVMアーキテクチャでは、MVCのコントローラーはViewModelに置き換えられます。

*ViewModel* -それは基本的にビューとモデルの間の変更を薬にします。 モデルのデータをビューにバインドします。 同時に、ビューとの直接的な相互作用はなく、モデルの知識しかありません。

ボタンクリックのリスナーを作成します。

Ext.getCmp('buttonId').on('click', function(){
//statement to perform logic
});

Ext.onReady（）の使用を説明します。

Ext.onReady（）は、DOMが完全に読み込まれたときに呼び出される最初のメソッドであり、スクリプトの実行時に参照したい要素が利用可能になります。

ページをクリックしたdiv要素のリスナーを作成します。

Ext.select('div').on('click', function(){
//statement to perform logic
});

Ext JSのアラートボックスにはどのような種類がありますか？

Ext JSのアラートボックスの種類は次のとおりです-

Ext.MessageBox.alert（）;
Ext.MessageBox.confirm（）;
Ext.MessageBox.wait（）;
Ext.MessageBox.promt（）;
Ext.MessageBox.show（）;

ストア、モデル、コントローラーの基本クラスは何ですか？

Storeの基本クラスはExt.data.Storeです

モデルの場合、Ext.data.Model

コントローラーの場合、Ext.app.controller

Ext JSでのイベント処理のさまざまな方法は何ですか？

これらは、イベント処理のさまざまな方法です-

リスナーの使用
後でイベントを添付する
カスタムイベントを使用する

ストアでレコードを取得しない方法は？

Store.getCount（）*-キャッシュされたレコード用
Store.getTotalCount（）*-DB内のレコードの合計なし。

ストアで変更されたレコードを取得する方法は？

Store.getModifiedRecords（）メソッドは、変更されたレコードを取得するために使用されます。

ストア内のレコードを更新する方法は？

ストアの変更を更新するStore.commitChanges（）メソッド。

インデックスを使用してストアレコードを取得する方法

グリッドIDがある場合：Ext.getCmp（ 'gridId'）。getStore（）。getAt（index）;

ストアIDがある場合：Ext.getStore（ 'storeId'）。getAt（index）;

ストアデータをロードする機能は何ですか？

Store.load（）;

フォーム、グリッド、チャート、パネル、ツリーの基本クラスを記述します。

グリッドの基本クラス-Ext.grid.GridPanel
フォームの場合– Ext.form.Panel
パネルの場合– Ext.panel.Panel
チャートの場合-Ext.chart.Chart
ツリーの場合– Ext.tree.Panel

Ext JSのレイアウトの種類は何ですか？

レイアウトの種類は次のとおりです-

絶対の
アコーディオン
アンカー
境界
Auto
hBox
vBox
カード（TabPanel）
カード（ウィザード）
カラム
Fit
表

グリッドにページネーションを適用する方法は？

これは、pagingToolbar（）を使用して行うことができます-

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
//trigger the data store load
store.load({params:{start:0, limit:25}});

ドッキングされたアイテムを追加する方法は？

dockedItems: [{
   xtype: 'toolbar',
   items: [{
      id:'buttonId',
      handler: function() {
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]

ロードマスクとは何ですか？

Loadmaskは、データがグリッドにレンダリングされるまでユーザーに読み込み（またはカスタムメッセージ）を表示することにより、他の操作を防止するために使用されます。ロードマスク：true;データをグリッドにレンダリングする際にロードマスクを表示するプロパティです。

レンダラーとは何ですか？

レンダラーは、ストアから取得したデータを操作して、何らかの基準に基づいて操作されたデータを表示する場合に使用されます。それはとして使用できる列のプロパティです-

renderer: function(value, metadata, record, rowIndex, colIndex, store){
//logic to perform
}

Ext JSで要素の値を取得する方法は？

Ext.getCmp（ 'id'）。getValue（）;

グリッドで列を非表示にする方法は？

非表示：true;

グリッドでソートするためのプロパティは何ですか？

ソート可能：true;デフォルトはtrueです。

ストア内のロードイベントの前後に書き込む方法

grid.getStore().on ({
   beforeload : function(store) {
     //perform some operation
   },
   load : {
      fn : function(store) {
        //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6は、デスクトップアプリケーションとモバイルアプリケーションの両方にどのように使用できますか？

Ext JS 6には、両方のフレームワーク（Ext JSとSencha Touch）の視覚要素を含めることができるツールキットパッケージがあります。

次のように追加できます-

'toolkit'： 'classic'、//または 'modern'

ツールキットがクラシックの場合、Ext JSデスクトップアプリケーションフレームワークが含まれます。

また、ツールキットが最新の場合、sencha touchモバイルアプリケーションフレームワークが含まれています。

次は何ですか？

さらに、あなたが主題で行った過去の課題を通過し、それらについて自信を持って話すことができることを確認することができます。あなたがより新鮮であれば、インタビュアーはあなたが非常に複雑な質問に答えることを期待していません。むしろ、あなたはあなたの基本概念を非常に強くしなければなりません。

第二に、いくつかの質問に答えられなかったとしても、それは本当に重要ではありませんが、答えたものが何であれ、自信を持って答えたに違いないということは重要です。面接中は自信を持ってください。 finddevguidesで私たちはあなたに良い面接担当者がいれば幸運であり、あなたの将来の努力のためにすべてが最善であることを願っています。乾杯:-)

Sr.No	Methods & Description
1	Ext.StringlEncode この関数は、html値をエンコードして解析可能にするために使用されます。例- `Ext.StringlEncode("< p > Hello World </p >"); Output - "< p > Hello World </p >".`
2	Ext.StringlDecode この関数は、エンコードされたhtml値をデコードするために使用されます。例- `Ext.StringlDecode("< p > Hello World </p >"); Output - "< p > Hello World </p &gt"`
3	Ext.String.trim この関数は、文字列内の不要なスペースを削除します。 `Ext.String.trim(' hello '); Output – "hello"`
4	Ext.String.urlAppend このメソッドは、URL文字列に値を追加するために使用されます。例- `Ext.String.urlAppend('https://www.google.com' , 'hello'); Output - "https://www.google.com?hello" Ext.String.urlAppend('https://www.google.com?index=1' , 'hello'); Output – "https://www.google.com?index=1&hello"`
5	Ext.String.toggle この機能は、2つの異なる値の間で値を切り替えることです。例- `var toggleString = 'ASC' toggleString = Ext.String.toggle(a, 'ASC', 'DESC'); Output – DESC as toggleString had value ASC. Now again, if we print the same we will get toggleString = “ASC” this time, as it had value 'DESC'. It is similar to ternary operator toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );`

Sr.No	Methods & Description
1	Ext.userAgent() この関数は、ブラウザのuserAgentに関する情報を提供します。 UserAgentは、Webサーバーに対してブラウザとオペレーティングシステムを識別することです。例-Mozillaで作業している場合、「mozilla/5.0（windows nt 6.1; wow64; rv：43.0）gecko/20100101 firefox/43.0」のような結果が返されます。
2	Version related function この関数は、IEに関連して呼び出された場合、現在使用中のブラウザーのバージョンを返します。 Firefoxブラウザーでは、0を返します。これらの関数は、Ext.firefoxVersion、Ext.ieVersionなどです。例-Firefoxブラウザを使用していて、IEのバージョンを取得するメソッドExt.ieVersionを呼び出すと、0が返されます。 IEブラウザで同じメソッドを使用している場合、8、9など、使用しているバージョンが返されます。
3	Ext.getVersion() この関数は、使用中の現在のExt JSバージョンを返します。例-Ext.getVersion（）を呼び出すと、バージョン、ショートバージョンなどの値の配列を返します。 Ext.getVersion（）。versionは、プログラムで使用されているExt JSの現在のバージョン（「4.2.2」など）を返します。
4	Browser related functions これらの関数は、使用中のブラウザに基づいてブール値を返します。これらのメソッドは、Ext.isIE、Ext.isIE6、Ext.isFF06、およびExt.isChromeです。例-Chromeブラウザを使用している場合、Ext.isChrome関数はすべてtrueを返し、そうでない場合はfalseを返します。
5	Ext.typeOf() この関数は、変数のデータ型を返します。例- `var a = 5; var b = 'hello'; Ext.typeOf(a); Output – Number Ext.typeOf(b); Output - String`
6	DataType related methods − These functions return boolean value based on the datatype of the variable 例- `var a = ['a', 'bc']; var b = 'hello'; var c = 123; var emptyVariable; var definedVariable; function extraFunction(){return true;}`

Extjs-quick-guide

Ext.js-概要

歴史

Ext JS 1.1

Ext JS 2.0

Ext JS 3.0

Ext JS 4.0

Ext JS 5.0

Ext JS 6.0

特徴

利点

制限事項

道具

煎茶CMD

Sencha IDEプラグイン

煎茶検査官

Ext.js-環境設定

ローカル環境のセットアップ

ライブラリファイルのダウンロード

CDNセットアップ

人気の編集者

ブラウザ

Ext.js-命名規則

Ext.js-アーキテクチャ

Ext JSアプリを使用したプロジェクト構造

使い方

Ext.js-最初のプログラム

ステップ1

索引

説明

ステップ2

Ext.js-クラスシステム

Ext JSでクラスを定義する

構文

Ext JSクラス定義の例

オブジェクトを作成する

新しいキーワードを使用する

Ext.create（）を使用する

Ext JSの継承

ext.extend

Mixinsを使用する

Ext.js-コンテナー

Ext.js-レイアウト

Ext.js-コンポーネント

Ext.js-ドラッグアンドドロップ

構文

例

Ext.js-テーマ

海王星のテーマ

鮮明なテーマ

トリトンのテーマ

灰色のテーマ

Ext.js-カスタムイベントとリスナー

イベントの書き込み方法

リスナーを使用した組み込みイベント

後でイベントを添付する

カスタムイベント

Ext.js-データ

モデル

モデルを作成する

格納

静的ストア

ダイナミックストア

プロキシ

クライアントプロキシ

サーバープロキシ

Ext.js-フォント

素晴らしいフォント

フォントピクト

Font-Pictosを追加する手順

Ext.js-スタイル

Ext.js-描画

Ext.js-ローカリゼーション

Ext.js-アクセシビリティ

Ext JSのアクセシビリティ

フォーカススタイリングとタブ

ARIAテーマ

Ext.js-Ext JSコードのデバッグ

アラートボックス

開発/デバッグツール