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

この章では、ExtJSで最初のHelloWorldプログラムを作成する手順を示します。

ステップ1

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

index.htm

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

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

renderToこのパネルがレンダリングする必要のある要素です。'helloWorldPanel'は、Index.htmlファイルのdivIDです。
Height そして width プロパティは、パネルのサイズをカスタマイズするためのものです。
Title プロパティは、パネルにタイトルを提供することです。
Html プロパティは、パネルに表示されるhtmlコンテンツです。

ステップ2

標準のブラウザでindex.htmファイルを開くと、ブラウザに次の出力が表示されます。