Ext.js-環境設定

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

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

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

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

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

JavaScript Files −フォルダ\ ext-6.0.1-trial \ ext6.0.1 \ buildの下にあるJSファイルは−です。

シニア番号	ファイル説明
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 Files −テーマベースのファイルがいくつかあり、フォルダ\ 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にある最新のテーマを使用できます。

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

<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>