SenchaTouch-最初のプログラム

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

ステップ1

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

index.htm

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
      </script>
      <script type = "text/javascript">
         Ext.application( {
            name: 'Sencha', launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true, items: [{
                     title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

説明

Ext.application（）メソッドは、SenchaTouchアプリケーションの開始点です。nameプロパティで宣言された「Sencha」というグローバル変数を作成します。Models、Views、Controllersなどのすべてのアプリケーションのクラスはこの単一の名前空間の下に存在するため、グローバル変数とファイル名が衝突する可能性が低くなります。
ページの準備が整い、すべてのJavaScriptファイルが読み込まれると、launch（）メソッドが呼び出されます。
Ext.create（）メソッドは、SenchaTouchでオブジェクトを作成するために使用されます。ここでは、単純なパネルクラスExt.tab.Panelのオブジェクトを作成しています。
Ext.tab.Panelは、パネルを作成するためのSenchaTouchの定義済みクラスです。
すべてのSenchaTouchクラスには、いくつかの基本的な機能を実行するためのさまざまなプロパティがあります。

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

fullscreen プロパティは完全な画面を利用することであるため、パネルは全画面スペースを占有します。
items プロパティは、さまざまなアイテムのコンテナです。
iconCls さまざまなアイコンを表示するために使用されるクラスです。
title プロパティは、パネルにタイトルを提供することです。
html プロパティは、パネルに表示されるhtmlコンテンツです。

ステップ2

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