Sencha Touch-最初のプログラム

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

ステップ1

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

索引

<!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（）メソッドは、Sencha Touchアプリケーションの出発点です。 nameプロパティで宣言された「Sencha」というグローバル変数を作成します。そのモデル、ビュー、コントローラーなどのアプリケーションのすべてのクラスはこの単一の名前空間の下に存在し、グローバル変数とファイル名が衝突する可能性を減らします。
ページの準備が整い、すべてのJavaScriptファイルがロードされると、launch（）メソッドが呼び出されます。
Ext.create（）メソッドは、Sencha Touchでオブジェクトを作成するために使用されます。ここでは、単純なパネルクラスExt.tab.Panelのオブジェクトを作成しています。
Ext.tab.Panelは、パネルを作成するためのSencha Touchの事前定義クラスです。
すべてのSencha Touchクラスには、いくつかの基本的な機能を実行するためのさまざまなプロパティがあります。

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

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

ステップ2

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

Sencha-touch-first-app

目次

Sencha Touch-最初のプログラム

ステップ1

索引

説明

ステップ2