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

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

Extjs-first-program

目次

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

ステップ1

索引

説明

ステップ2