Sencha Touch-概要

Sencha Touchは、モバイルアプリケーション用のユーザーインターフェイスを作成するためのSenchaの一般的なフレームワークです。開発者が、Android、IOS、BlackBerry、Windowsなどの多くのモバイルデバイスをサポートするシンプルなHTML、CSS、JSを使用してモバイルアプリを作成するのに役立ちます。 MVCアーキテクチャに基づいています。 Sencha Touchの最新バージョンは2.4です。

Sencha Touchの歴史

Webアプリケーション用のSenchaの他の製品ExtJsをリリースした後、モバイルデバイスでも機能するフレームワークを開発する必要がありました。

Sencha Touchの最初のバージョンは0.9ベータバージョンで、AndroidおよびIOSデバイスをサポートしていました。その後、Sencha Touchバージョン1.0の最初のメインリリースは2010年11月で、これは最初の安定バージョンであり、Blackberryデバイスもサポートしていました。

Sencha Touchの最新リリースは2015年6月にリリースされたバージョン2.4で、Windows、Tizen、Android、IOS、BlackBerry OS 10、Android向けGoogle Chrome、モバイルSafariなどの多くのデバイスをサポートしています。

Sencha Touchの機能

以下は、Sencha Touchの最も顕著な特徴です-

リスト、カルーセル、フォーム、メニュー、ツールバーなど、モバイルプラットフォーム専用に構築された豊富なUIのコレクションを備えた、カスタマイズ可能な50以上のUIウィジェット。
古いバージョンと新しいバージョンのコードの互換性。
異なるOSを備えた複数のモバイルデバイスでデータとコンテンツの表示を整理するのに役立つ柔軟なレイアウトマネージャー。
このフレームワークには、あらゆるバックエンドデータソースからのデータを消費できる堅牢なデータパッケージが含まれています。
適応性のあるレイアウト、アニメーション、およびスムーズなスクロールにより、モバイルWebアプリケーションをより快適に使用できます。
すべての主要なプラットフォームですぐに使用できるネイティブな外観のテーマにより、Webおよびハイブリッドアプリケーションをターゲットプラットフォームのルックアンドフィールに一致させることができます。

Sencha Touch─利点

Sencha Touchは、ビジネスグレードのWebアプリケーション開発の主要な標準です。ほとんどのモバイルデバイス向けに堅牢なアプリケーションを構築するために必要なツールを提供し、アプリケーション開発用の単一プラットフォームを提供します。以下はいくつかの利点です-

レスポンシブタッチ機能を提供するため、ユーザーはモバイルアプリの使用中に簡単に移動できます。
IOS、Android、Blackberry、およびWindowsのすべての最新バージョンとの互換性を提供します。
あらゆるモバイルアプリケーションにとって望ましい最速の速度を提供します。
クロスプラットフォームの互換性を備えた費用対効果の高いソリューションを提供します。
ネイティブAPIとHTML、CSS、JSなどの基本的なWeb開発言語に基づいており、開発者がSencha Touchを理解しやすくなります。

Sencha Touch─制限事項

Sencha Touch APIには次の機能がありません-

アプリは、デバイスのカメラ、連絡先、および加速度計にアクセスできません。
プッシュ通知機能は提供しません。このためには、websocketsまたは長いポーリングを使用する必要があります。
一般的なパブリックライセンスポリシーによると、オープンソースアプリケーションの場合は無料ですが、商用アプリケーションの場合は有料です。
ハードコアなグラフィックスやゲームアプリなどのアニメーションアプリには適していません。

Sencha Touch─ツール

Sencha SDK

これは、プロジェクトのスケルトンを作成するために使用されるSencha開発キットです。コマンド「sencha -sdk path/to/touch generate app appName」を使用して、コマンドで指定された名前でアプリを作成します。

アプリが作成されると、アプリで次のファイルを見ることができます-

app -このフォルダーには、モデル、ビュー、コントローラー、およびアプリのストアファイルが含まれます。
app.js -これはアプリケーションのメインJSファイルです。このファイルから、Senchaコードフローが開始されます。
app.json -これはアプリの構成ファイルです。すべての構成の詳細がここに表示されます。
indexl -これはapp.jsと他のSencha関連ファイルを含むメインのhtmlファイルです。
package.json -このファイルには、アプリに関連するすべての依存関係およびその他の情報が含まれています。
リソース-このフォルダーには、アプリケーションに必要なすべてのCSSファイルと画像が含まれています。

煎茶CMD

Sencha CMDはコマンドラインツールであり、Sencha Touchコードミニフィケーション、スキャフォールディング、ビルド生成、および生産目的のための他の便利な機能を提供します。

コマンドプロンプトでコマンド「Sencha app build package」を使用して、このためのアプリケーションをビルドします。コマンドプロンプトでappディレクトリに移動し、上記のコマンドを入力します。ビルドが成功すると、基本的に生産目的で使用されるアプリケーションの縮小バージョンが表示されます。

これはhttps://www.sencha.com/products/extjs/cmd-download/[__ https://www.sencha.com/products/extjs/cmd-download/]からダウンロードできます。

煎茶検査官

Sencha Inspectorは、開発中にSenchaコードの問題をデバッグするためのデバッグツールです。

Sencha Touch-環境

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

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

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

次のリンクhttps://www.sencha.com/products/download[https://www.sencha.com]からSencha Touchライブラリファイルの商用バージョンをダウンロードします。登録済みメールIDのサイトから試用版を取得します。これは、sencha-touch-2.4.2-commercialという名前の圧縮されたフォルダーになります。

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

*Javascript Files* -フォルダ\ sencha-touch-2.4.2commercial \ touch-2.4.2にあるJSファイルは-

Sr.No	File & Description
1	sencha-touch.js これは、アプリケーションを実行するためのすべての機能を含むコアファイルです。
2	sencha-touch-all.js このファイルには、ファイル内にコメントなしで縮小されたすべてのコードが含まれています。
3	sencha-touch-debug.js これは、デバッグ用のsencha-touch-all.jsの縮小されていないバージョンです。
4	sencha-touch-all-debug.js このファイルも縮小されておらず、エラー/問題をチェックするためのすべてのコメントとコンソールログが含まれているため、開発目的で使用されます。

これらのファイルをプロジェクトのJSフォルダーに追加するか、システム内のファイルが存在する場所への直接パスを指定できます。

CSSファイル*-フォルダーI：\ sencha touch \ sencha-touch-2.4.2-commercial \ touch-2.4.2 \ resources \ css \ sencha-touch.cssにあるテーマベースのファイルが多数あります。

これらのライブラリファイルは、次のようにSencha Touchアプリケーションに追加されます-

<html>
   <head>
      <script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>
      <link href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet"/>
      <script type ="text/javascript" src = "app.js" > </script>
   </head>
</html>

app.jsファイルにSencha Touchアプリケーションコードを保持できます。

CDNセットアップ

CDNは、Sencha Touchライブラリファイルをダウンロードする必要のないコンテンツ配信ネットワークです。代わりに、次のようにプログラムにExtJSのCDNリンクを直接追加できます-

<html>
   <head>
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet"/>
      <script type = "text/javascript" src = "app.js" > </script>
   </head>
</html>

Sencha Touch-命名規則

命名規則*は、識別子について従うべき規則のセットです。他のプログラマーにとってもコードを簡単に読みやすく理解しやすくします。

Sencha Touchの命名規則は、標準のJavaScript規則に従います。これは必須ではありませんが、従うことをお勧めします。クラス、メソッド、変数、プロパティに名前を付けるためのキャメルケース構文に従う必要があります。

名前が2つの単語と組み合わされている場合、2番目の単語は常に大文字で始まります。たとえば、doLayout（）、StudentForm、firstNameなど。

Sr.No.	Name & Convention
1	Class Name 大文字で始まり、その後にキャメルケースが続くはずです。たとえば、StudentClass
2	Method Name 小文字で始まり、その後にキャメルケースが続くはずです。たとえば、studentMethod（）
3	Variable Name 小文字で始まり、その後にキャメルケースが続くはずです。たとえば、studentName
4	Constant Name 大文字のみにする必要があります。たとえば、COUNT、MAX_VALUE
5	Property Name 小文字で始まり、その後にキャメルケースが続くはずです。たとえば、enableColumnResize = true

Sencha Touch-アーキテクチャ

モバイルアプリケーションの最下層はOSであり、その上に何かまたはすべてが構築されます。次に、アプリケーションを実行するブラウザーがあります。 Chrome、Safari、IEなどがあります。上位層はW3標準であり、これはすべてに共通です。 Sencha TouchはW3標準に基づいて構築されています。W3標準はHTML5に他なりません。これにより、単一のアプリケーションがさまざまなデバイスのさまざまなブラウザーと互換性を持ちます。

Sencha Touchは、ExtJ、JqTouch、Raphael（ベクター描画）の3つのフレームワークの組み合わせです。 MVCアーキテクチャに従います。 MVCはコードをより管理しやすいチャンクに分離します。

ただし、このプログラムにはアーキテクチャは必須ではありませんが、この構造に従ってコードのメンテナンス性と編成性を高めることをお勧めします。

Sencha Touchアプリのプロジェクト構造

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Sencha Touchアプリフォルダーは、プロジェクトのJavaScriptフォルダーにあります。

アプリには、app.jsを含むコントローラー、ビュー、モデル、ストア、およびユーティリティファイルが含まれます。

*app.js* -プログラムのフローが開始されるメインファイル。 <script>タグを使用してメインHTMLファイルに含める必要があります。 アプリは、残りの機能のためにアプリケーションのコントローラーを呼び出します。

*Controller.js* -Sencha Touch MVCアーキテクチャのコントローラーファイルです。 これには、アプリケーションのすべての制御、イベントリスナー、およびコードのほとんどの機能が含まれます。 次のタスクを実行します：ルーティング、ビューとモデルの中間、イベントの実行。

*View.js* -アプリケーションのインターフェース部分が含まれ、ユーザーに表示されます。 Sencha Touchは、さまざまなUIリッチビューを使用します。これらのビューは、要件に応じて拡張およびカスタマイズできます。

*Store.js* -ローカルにキャッシュされたデータが含まれており、モデルオブジェクトの助けを借りてビューにレンダリングされます。 ストアは、プロキシを使用してデータを取得します。プロキシには、バックエンドデータを取得するサービス用に定義されたパスがあります。

*Model.js* -表示するストアデータをバインドするオブジェクトが含まれています。 これは、基本的にデータベースを扱う実世界のオブジェクトの表現です。

*Utils.js* -MVCアーキテクチャには含まれていませんが、これを使用してコードをクリーンで複雑さを抑え、読みやすくすることをお勧めします。 このファイルにメソッドを記述し、必要に応じてコントローラーまたはビューレンダラーでメソッドを呼び出すことができます。 コードの再利用性の目的にも役立ちます。

Sencha Touch-MVC

MVCはModel View Controllerの略です。これは、アプリケーションを論理コンポーネントに分割して管理しやすくするアーキテクチャパターンです。

次の図は、MVCアーキテクチャの仕組みを示しています-

MVC

*Controller* -コントローラーは、モデルが変更された場合にビューに通知し、ユーザー入力に基づいてアクションを実行するアプリケーション全体を制御します。

表示-ユーザーに視覚的なアプリケーションのインターフェイス部分が含まれています。ユーザー入力時にモデルを変更するようコントローラーに通知します。

モデル-表示するストアデータをバインドするオブジェクトが含まれています。それは基本的にデータベースを扱う実世界のオブジェクトの表現です。また、ビューの変更についてコントローラーに通知します。

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-ビルド

Webアプリケーションに対する今日の需要は、少ない開発労力で高速アプリケーションを開発することです。 Sencha Touchは、カスタムビルドを作成する機能に加えて、開発コードまたは実動コードに基づいて選択できる多数のビルドライブラリを提供するため、簡単にこれを行うことができます。

Sencha Touchビルドライブラリは、クラスを動的にロードします。動的ロードは、必要なときにロードされるクラスを表し、アプリケーションに必要なクラスのみが含まれます。これにより、ロードするファイルの数が減るにつれてアプリケーションの実行が高速になり、同時にロード時間が短縮されます。

Sencha Touch 2.xは、次の5つのビルドライブラリを提供します。

Sr.No.	Builds & Usage
1	sencha-touchdebug.js このビルドは、アプリケーションをローカルで開発するときに使用されます。開発中に簡単にデバッグできるように、すべてのコメントとデバッグログを備えた縮小されていないバージョンです。
2	senchatouch.js このファイルは本番目的で使用されます。これは、カスタムビルドがある場合の縮小バージョンです。
3	sencha-touchall.js このファイルは本番目的で使用されます。カスタムビルドがない場合は縮小版です。
4	sencha-touchall-debug.js このファイルは、実稼働環境でのデバッグに使用されます。縮小されておらず、すべてのコメントとデバッグログがあります。
5	sencha-touchall-compat.js このビルドは、バージョン1.xをバージョン2.xに移行するために使用されます。バージョン1.xのコードに互換性がなく、コードの変更が必要な場合は、警告が表示されます。

上記のビルドにより、Sencha Touchはカスタムビルドを作成する機能を提供します。

カスタムビルドを使用する利点

カスタムビルドは、すべてのタッチファイルをロードしません。アプリケーションで使用しているファイルのみをロードするため、アプリケーションの高速化とメンテナンスが容易になります。

Sencha CMDは、カスタムビルドの作成に使用されます。 Sencha CMDでカスタムビルドを作成するには、アプリファイルが存在するディレクトリに移動し、次のコマンドのいずれかを入力してビルドを作成します。

Sr.No.

Command & Usage

1

sencha app build native

アプリケーションをビルドし、アプリケーションのパッケージ化に使用できるpackager.temp.jsonというファイルを準備します。packager.temp.jsonはpackager.jsonと同じですが、追加のパスが含まれています。

2

sencha app build -run native

アプリケーションをビルドして自動的にパッケージ化し、適切なシミュレーターを起動します。

3

sencha app build package

パッケージ化サポートを使用してアプリをビルドしますが、パッケージャーJSONファイルを構成しません。これは、複数のpackager.jsonファイルを手動で管理するプロジェクトに役立ちます。

ビルドが成功すると、all-classes.jsファイルが生成されます。これをindexlに含めて、本番環境で使用できるようにする必要があります。

次のコードは、生産準備完了コードに対して行う変更を示しています。

アプリケーションを構築する前のインデクセル

<!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-debug.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
   </head>
   <body>
   </body>
</html>

アプリケーション構築後のインデクス

<!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.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
      <script type = "text/javascript" src = "app-classes.js"> </script>
   </head>
   <body>
   </body>
</html>

Sencha Touch-移行

Sencha Touchには、以前のバージョンからのさまざまな修正が含まれています。

Sencha Touch 2には後方互換性ビルドが付属しているため、バージョン1.xから2.xへの移行プロセスが簡単になります。

このビルドは、移行の問題が発生した場合やコードの変更が必要な場合に警告とログを提供することで作業を簡単にします。したがって、ユーザーはアプリケーションが最新バージョンで動作することを確認するために変更が必要な場所を知ることができます。

Sencha Touch 2.xの移行には、次のコード変更が必要です。

クラスシステム

Sencha Touch 1.xのコード*-

MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
   scroll: 'vertical',
   html: 'Student Panel'
   initComponent: function() {
      Ext.getCmp('StudentIdDiv').update('This is a Student panel');
   }
});

Sencha Touch 2.xのコード*-

Ext.define('MyApp.view.StudentPanel', {
   extend: 'Ext.Panel',

   config: {
      scroll: 'vertical',
      html: 'Student Panel'
   },

   initialize: function() {
      Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
   }
});

両方のバージョンを見ると、クラスを作成する方法が変更されていることがわかります。これは、次のようなExtJに触発されたものです-

Ext.extendはExt.defineに変更されます。
これで、クラスに関連するすべての構成パラメーターがconfigパラメーターの下で定義されました。
initComponentは、initialize（）メソッドに変更されます。
Sencha Touch 2.xでは、setHtml（）およびgetHtml（）関数を使用して、htmlを更新したり、値を取得したりできます。

MVCのアーキテクチャ

Sencha Touch 1.xコードはモジュール式で、MVCアーキテクチャに基づいていました。 Sencha Touch 2.xは、モデル、ビュー、コントローラーを記述するための異なる構文に従います。異なるバージョンのモデル、ビュー、コントローラーファイルの違いを見てみましょう。

モデル

Sencha Touch 1.xのコード*-

Ext.regModel('MyApp.model.StudentModel', {
   fields: [
      {name: 'name',  type: 'string'},
      {name: 'age',   type: 'int'}
   ]
});

Sencha Touch 2.xのコード*-

Ext.define('MyApp.model.StudentModel', {
   extend: 'Ext.data.Model', config: {
      fields: [
         {name: 'name',  type: 'string'},
         {name: 'age',   type: 'int'}
      ]
   }
});

Ext.regModelは、Ext.data.Modelを拡張するExt.defineに変更されます。

2.xバージョンでは、すべてのフィールドがconfigセクションになりました。

View

Sencha Touch 1.xのコード*-

Ext.Panel("studentView", {
   items: [{}]
});

Sencha Touch 2.xのコード*-

Ext.define('MyApp.view.StudentView', {
   extend: 'Ext.tab.Panel',
   items: [{}]
});

ビューはほぼ同じで、ビュー名がMyapp.view.StudentViewなどの2.xバージョンの名前空間に従う唯一の変更点であり、コードはモデルのようにExt.defineメソッドで記述しています。

コントローラ

Sencha Touch 1.xのコード*-

Ext.regController("studentController", {
   someMethod: function() {
      alert('Method is called');
   }
});

Sencha Touch 2.xのコード*-

Ext.define('MyApp.controller.studentController', {
   extend: 'Ext.app.Controller', someMethod: function() {
      alert('Method is called');
   }
});

コントローラーのモデルと同じ。また、Ext.regControllerはExt.defineに変更され、Ext.app.Controllerを拡張します。

応用

Sencha Touch 1.xのコード*-

Ext.application({
   name: 'MyApp',
   launch: function() {
      Ext.create('MyApp.view.StudentView');
   }
});

Sencha Touch 2.xのコード*-

Ext.application({
   name: 'MyApp',
   models: ['studentModel'],
   controllers: ['studentController'],
   views: ['studentView'],
   stores: ['studentStore'],

   launch: function() {
      Ext.create('MyApp.view.Main');
   }
});

バージョン1.xとバージョン2.xの主な違いは、2.xではすべてのモデル、ビュー、コントローラー、ストアをアプリケーション自体で宣言することです。

Sencha Touch-コアコンセプト

Sencha Touchには、クラスシステム、ajax、コントローラーなど、さまざまなコアコンセプトがあります。

次の表に、Sencha Touchのコアコンセプトへのリンクを示します。

Sr.No.	Concept & Description Link
1	Class System
2	Components
3	Controllers
4	BlackBerry support
5	Use of Ajax

Sencha Touch-データパッケージ

Sencha Touchのデータパッケージは、データを保存またはロードするあらゆる種類のデータ操作を実行します。

データパッケージは、モデル、ストア、およびプロキシに関連しています。

Sr.No.

Concept & Description Link

1

Model

UIにすべての値を表示するデータとフィールドのコレクションです。リンク：/sencha_touch/sencha_touch_data_model [説明]

2

Store

これは、基本的にデータをローカルに保存するモデルインスタンスのコレクションです。ストアでは、データを取得するためにすべてのイベントと休憩の呼び出しを書き込みます。リンク：/sencha_touch/sencha_touch_data_store [説明]

3

Proxy

基本的に、ストアにデータをロードします。ほとんどの場合、ストアデータを読み込むためにajaxプロキシを使用します。リンク：/sencha_touch/sencha_touch_data_proxy [説明]

Sencha Touch-テーマ

Sencha Touchは、アプリケーションで使用される多くのテーマを提供します。クラシックテーマの代わりに異なるテーマを追加し、アプリケーションに使用しているデバイスに基づいて出力の違いを確認できます。これは、次の例で説明するように、テーマCSSファイルを置き換えるだけで簡単に実行できます。

デスクトップテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションの次のCSSは、デスクトップテーマに使用されます。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

効果を確認するには、次のプログラムを試してください-

<!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>
</html>

これにより、次の結果が生成されます–

Windowsテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します-

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Windowsテーマを使用するには、次のCSSを追加します。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css

効果を確認するには、次のプログラムを試してください-

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.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>
</html>

これにより、次の結果が生成されます–

IOSテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Windowsテーマを使用するには、次のCSSを追加します

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css

効果を確認するには、次のプログラムを試してください-

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.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>
</html>

これにより、次の結果が生成されます–

IOSクラシックテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します-

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Windowsテーマを使用するには、次のCSSを追加します-

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css

効果を確認するには、次のプログラムを試してください-

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.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>
</html>

これにより、次の結果が生成されます–

Androidテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Windowsテーマを使用するには、次のCSSを追加します。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css

効果を確認するには、次のプログラムを試してください-

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.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>
</html>

これにより、次の結果が生成されます–

BlackBerryテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Windowsテーマを使用するには、次のCSSを追加します。

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css

効果を確認するには、次のプログラムを試してください-

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.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>
</html>

これにより、次の結果が生成されます–

Sencha Touch-デバイスプロファイル

今日のテクノロジーの世界では、モバイル、タブレット、デスクトップ、ラップトップなど、画面サイズが異なる複数のデバイスがあります。したがって、すべてのデバイスから見た目と使い心地の良いアプリケーションを開発する必要があります。ただし、デバイスごとに異なるコードを開発するのは非常に時間がかかり、費用がかかります。

Sencha Touchは、デバイスプロファイル機能を提供することで、この点で私たちを支援します。アクティブなプロファイルに基づいて、さまざまな依存関係が実行され、適用されます。

アプリケーションコードの作成中にデバイスプロファイルを宣言できます。私たちは複数のデバイスを持つことができます-

Ext.application({
   name: 'MyApp',
   profiles: ['Phone', 'Tablet']
});

それが完了すると、プロファイルがロードされます-

MyApp.profiles.Phone.js
MyApp.profiles.Tablet.js

簡単な電話プロファイルの作成

Ext.define('Mail.profile.Phone', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Phone',
      views: ['phoneView']
   },

   isActive: function() {
      return Ext.os.is('Phone');
   }
});

簡単なタブレットプロファイルの作成

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
});

プロファイルでわかるように、特定のデバイスがアクティブかどうかを判断するisActive関数があります。デバイスがアクティブな場合、対応する依存関係がロードされ、インスタンス化されます。

上記の例で述べたように、電話デバイスを使用している場合、電話プロファイルのisActive関数はtrueを返し、電話デバイスに関連する依存関係がロードされます。ここでphoneViewがロードされます。デバイスがタブレットの場合、電話プロファイルのisActive関数はfalseを返し、タブレットプロファイルのisActive関数はtrueを返し、依存関係tabletViewがロードされます。

起動プロセス

ここで注意すべきもう1つのポイントは、アプリケーションにプロファイルがある場合、アプリケーションコードのロードとインスタンス化は次の順序になります-

コントローラーが最初にインスタンス化され、各コントローラーの初期化関数がロードされます。
プロファイルの起動関数が呼び出されます。
アプリケーションの起動関数が呼び出されます。

プロファイルとアプリケーションの起動関数はどちらもオプションであるため、いずれも定義しないと、呼び出されません。

次のコードを見て、さまざまな起動および初期化関数を定義できる場所と方法を確認してください。

コントローラーの初期化機能

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   init : function (){
      Ext.Msg.alert('Controller's init method');
   },

   config: {
      refs: {
         tab: '#divId
     }
   }
});

プロファイルの起動機能

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet', views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
   launch : function() {
      Ext.Msg.alert('profile's launch function');
   }
});

アプリケーションの起動機能

Ext.application({
   name: 'Sencha', launch: function() {
      Ext.Msg.alert(Application's launch function);
   }
});

Sencha Touch-依存関係

Sencha Touchには、アプリケーション内とクラス内での依存関係を宣言する特定の方法が定義されています。

依存関係を定義するさまざまな方法を見てみましょう。

アプリケーションレベルの依存関係

ここでは、Ext.applicationを作成するときにすべての依存関係を宣言します。

Ext.application({
   name: 'MyApp',
   views: ['StudentsView'],
   models: ['StudentsModel'],
   controllers: ['StudentsController'],
   stores: ['StudentsStore'],
   profiles: ['Phone', 'Tablet']
});

これで、アプリケーションがロードされると、すべての依存関係が同時にロードされます。他のファイルのパスは-

MyApp.views.StudentsView
MyApp.models.StudentsModel
MyApp.stores.StudentsStoreなど。

上記の宣言方法は、ファイルをロードするだけでなく、アクティブとして保持するプロファイルも決定します。コントローラーをロードした後、それは必ずインスタンス化されます。ストアがロードされると、ストアがインスタンス化され、まだ指定されていない場合は1つのIDが提供されます。

プロファイル固有の依存関係

アプリケーションでプロファイルを使用している場合、特定のプロファイルにのみ必要な機能がほとんどない可能性があります。

プロファイル固有の依存関係は、アプリケーションレベルの宣言ではなく、プロファイル自体で宣言されます。

Ext.define('MyApp.profile.Tablet', {
   extend: 'Ext.app.Profile', config: {
      views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
   }
});

依存関係は、アクティブであるかどうかに関係なくロードされます。ただし、アクティブなプロファイルに基づいて、コントローラーとストアのインスタンス化などの追加処理が行われます。

ネストされた依存関係

より大きなアプリケーションがある場合、複数のコントローラー、モデル、ビュー、およびストアがあります。

大規模なアプリケーションでモジュール性を維持することは常に有効です。そのために、サブフォルダーを定義し、依存関係を宣言しながら、サブフォルダー名を使用して宣言できます。

Ext.application({
   name: 'MyApp',
   controllers: ['Controller', 'nested.NewController'],
   views: ['class.Cview', 'SView']
});

上記の場合、次のファイルがロードされます-

MyApp.controllers.Controller
MyApp.controllers.nested.NewController
MyApp.Views.Sview
MyApp.Views.class.Cview

外部依存関係

クラスの完全修飾名を次のように指定することにより、アプリケーションの外部で依存関係を指定できます-

Ext.Loader.setPath({
   'Class': 'Class'
});

Ext.application({
   views: ['Class.view.LoginForm', 'Welcome'],
   controllers: ['Class.controller.Sessions', 'Main'],
   models: ['Class.model.User']
});

上記の場合、次のファイルがロードされます-

クラス/ビュー/LoginForm.js
クラス/コントローラー/Sessions.js
クラス/モデル/User.js
app/view/Welcome.js
app/controller/Main.js

Sencha Touch-環境検出

使用しているオペレーティングシステム、作業しているブラウザ、および環境で利用可能な機能を識別するのに役立ちます。

Sencha Touchは、環境固有の情報を取得するためのさまざまな機能を提供します。条件がif（Ext.os.is.Windows）\ {}であり、条件に基づいてタスクを実行できる場合、以下に示すすべてのメソッドをチェックインできます。

以下のすべてのメソッドはブール値を返します。

オペレーティング・システム

Ext.osは、作業中のオペレーティングシステムを知るためのさまざまなメソッドを提供するクラスです。

Sr.No	Method & Description
1	Ext.os.is.webOS この関数は、webosオペレーティングシステムを使用している場合はtrueを返し、そうでない場合はfalseを返します。
2	Ext.os.is.RIMTable この関数は、RIMTableオペレーティングシステムを使用している場合はtrueを返し、そうでない場合はfalseを返します。
3	Ext.os.is.Linux この関数は、Linuxオペレーティングシステムを使用している場合はtrueを返し、そうでない場合はfalseを返します。
4	Ext.os.is.Windows この関数は、Windowsオペレーティングシステムを使用している場合はtrueを返し、それ以外の場合はfalseを返します。
5	Ext.os.is.MacOs この関数は、Macオペレーティングシステムを使用している場合はtrueを返し、それ以外の場合はfalseを返します。
6	Ext.os.is.BlackBerry この関数は、BlackBerryオペレーティングシステムを使用している場合はtrueを返し、それ以外の場合はfalseを返します。
7	Ext.os.is.iOS IOSオペレーティングシステムを使用している場合、この関数はtrueを返します。それ以外の場合はfalseを返します。
8	Ext.os.is.Android この関数は、Androidオペレーティングシステムを使用している場合はtrueを返し、それ以外の場合はfalseを返します。

デバイス検出

Sr.No

Method & Description

1

Ext.os.is.iPad

iPadを使用している場合、この関数はtrueを返します。それ以外の場合はfalseを返します。

2

Ext.os.is.iPhone

この関数は、iPhoneを使用している場合はtrueを返し、それ以外の場合はfalseを返します。

3

Ext.os.is.iPod

この関数は、iPodを使用している場合はtrueを返し、それ以外の場合はfalseを返します。

オペレーティングシステムのバージョン

Sr.No

Method & Description

1

Ext.os.name

オペレーティングシステムの名前を返します。

2

Ext.os.version.version

使用しているオペレーティングシステムのバージョンを示します。

ブラウザ検出

Sr.No	Method & Description
1	Ext.browser.is.IE この関数は、Internet Explorerブラウザーを使用している場合はtrueを返し、そうでない場合はfalseを返します。
2	Ext.browser.is.FF この関数は、FireFoxブラウザーを使用している場合はtrueを返し、そうでない場合はfalseを返します。
3	Ext.browser.is.Chrome この関数は、Chromeブラウザーを使用している場合はtrueを返し、そうでない場合はfalseを返します。
4	Ext.browser.is.Opera Operaブラウザを使用している場合、この関数はtrueを返します。それ以外の場合はfalseを返します。
5	Ext.browser.is.Safari この関数は、Safariブラウザを使用している場合はtrueを返し、そうでない場合はfalseを返します。

この機能Ext.browserはさまざまな他の機能を提供します-

Sr.No	Method & Description
1	Ext.browser.userAgent 現在のuserAgentを返します。
2	Ext.browser.isSecure 現在のページがSSLを使用している場合、trueを返します。
3	Ext.browser.isStrict ブラウザがストリクトモードの場合、trueを返します。
4	Ext.browser.engineName ブラウザエンジン名（WebKit、Gecko、Presto、Trident、その他）を返します。
5	Ext.browser.engineVersion ブラウザエンジンのバージョンを返します。

特徴

Ext.feature.hasは、ブラウザに次の機能があるかどうかを確認します。

Sr.No	Method & Description
1	Ext.feature.has.Audio ブラウザがhtml5のオーディオタグ機能をサポートしている場合、このメソッドはtrueを返します。
2	Ext.feature.has.Canvas ブラウザがhtml5のキャンバスタグ機能をサポートしている場合、このメソッドはtrueを返します。
3	Ext.feature.has.classList ブラウザがhtml5のクラスリスト機能をサポートしている場合、このメソッドはtrueを返します。これは、html要素のcssクラスの追加、削除、切り替えに使用されます。
4	Ext.feature.has.Css3dTransforms ブラウザがcss3のCss 3d変換機能をサポートしている場合、このメソッドはtrueを返します。
5	Ext.feature.has.CssAnimations ブラウザがcss3のアニメーションをサポートしている場合、このメソッドはtrueを返します。
6	Ext.feature.has.CssTransforms ブラウザがcss3のCss変換機能をサポートしている場合、このメソッドはtrueを返します。
7	Ext.feature.has.CssTransitions ブラウザがcss3の移行機能をサポートしている場合、このメソッドはtrueを返します。
8	Ext.feature.has.DeviceMotion ブラウザがデバイスモーション機能をサポートしている場合、このメソッドはtrueを返します。
9	Ext.feature.has.Geolocation ブラウザがhtml5のGeolocation機能をサポートしている場合、このメソッドはtrueを返します。
10	Ext.feature.has.History ブラウザがhtmlの履歴機能をサポートしている場合、このメソッドはtrueを返します。
11	Ext.feature.has.Orientation ブラウザがデバイスの向きを検出できる場合、このメソッドはtrueを返します。
12	Ext.feature.has.OrientationChange ブラウザがデバイスの方向の変化を検出できる場合、このメソッドはtrueを返します。
13	Ext.feature.has.Range 範囲は、範囲スライダー要素のhtml入力タグの一種であるため、ブラウザーがスライダーをサポートしている場合、この関数はtrueを返します。
14	Ext.feature.has.SqlDatabase Web SQLデータベースは、クエリ操作を実行できるデータベースにデータを保存するためのWebページAPIです。ブラウザがWeb Sql Databaseをサポートしている場合、このメソッドはtrueを返します。
15	Ext.feature.has.Svg Svgは、Scalable Vector Graphicsの略で、ブラウザがhtml 5のsvg機能をサポートしている場合にtrueを返します。
16	Ext.feature.has.Touch ブラウザにタッチ機能がある場合、このメソッドはtrueを返します。
17	Ext.feature.has.Video ブラウザがhtml 5ビデオタグをサポートしている場合、このメソッドはtrueを返します。
18	Ext.feature.has.Vml Vmlは、xmlベースのマークアップ言語であるベクトルマークアップ言語の略です。したがって、ブラウザがvmlをサポートしている場合、このメソッドはtrueを返します。
19	Ext.feature.has.WebSockets Webソケットは基本的に、クライアントとサーバー間の2つの通信をサポートするコンピューターの通信プロトコルです。このメソッドは、ブラウザがWebSocketをサポートしている場合はtrueを返し、そうでない場合はfalseを返します。

Sencha Touch-イベント

イベントは、クラスに何かが発生したときに発生するものです。たとえば、ボタンがクリックされたとき、または要素がレンダリングされる前/後に。

イベントの書き込み方法

イベントを書き込む方法は次のとおりです。

リスナーを使用した組み込みイベント。
後でイベントを添付する *カスタムイベント

リスナーを使用した組み込みイベント

Sencha Touchは、Sencha Touchファイルにイベントとカスタムイベントを書き込むためのリスナープロパティを提供します。

Sencha Touchでリスナーを書く

次のように、listenプロパティをパネルに追加することにより、前のプログラム自体にリスナーを追加します-

<!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.Panel', {
                  html: 'My Panel', fullscreen: true, listeners: {
                     painted: function() {
                        Ext.Msg.alert('I was painted to the screen');
                     }
                  }
               });
            }
         });
      </script>
   </head>
</html>

これにより、次の結果が生成されます–

このようにして、listenersプロパティに複数のイベントを書き込むこともできます。

同じリスナー内の複数のイベント

<!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() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });

               myButton.on({
                  tap: function() {
                     var randomWidth = 100 + Math.round(Math.random()* 200);
                     this.setWidth(randomWidth);
                  },
                  widthchange: function(button, newWidth, oldWidth) {
                     alert('My width changed from ' + oldWidth + ' to ' + newWidth);
                  }
               });
            }
         });
      </script>
   </head>
</html>

それは次の結果を生成します-

後でイベントを添付する

イベントを記述する以前の方法では、要素の作成時にリスナーでイベントを記述しました。

イベントを添付する他の方法は次のとおりです-

<!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() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: 'Click me'
               });

               myButton.on('tap', function() {
                  alert("Event listener attached by .on");
               });
            }
         });
      </script>
   </head>
</html>

それは次の結果を生成します-

カスタムイベント

Sencha Touchでカスタムイベントを記述し、fireEventメソッドでイベントを発生させることができます。次の例では、カスタムイベントを記述する方法について説明します。

<!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() {
               var myButton = Ext.Viewport.add({
                  xtype: 'button',
                  centered: true,
                  text: "Just wait 5 seconds",

                  listeners: {
                     myEvent: function(button, points) {
                        alert('myEvent was fired! You score ' + points + ' points');
                     }
                  }
               });

               Ext.defer(function() {
                  var number = Math.ceil(Math.random() * 100);
                  myButton.fireEvent('myEvent', myButton, number);
               }, 5000);
            }
         });
      </script>
   </head>
</html>

ページが読み込まれ、ドキュメントの準備が整うと、ボタン付きのUIページが表示されます。5秒後にイベントが発生すると、ドキュメントの準備が整うと5秒後にアラートボックスが表示されます。

ここでは、カスタムイベント「myEvent」を記述し、button.fireEvent（eventName）;としてイベントを発生させています。

Sencha Touch-レイアウト

レイアウトは、コンテナ内での要素の配置方法です。それは水平、垂直、またはその他の可能性があります。 Sencha Touchのライブラリには異なるレイアウトが定義されていますが、カスタムレイアウトもいつでも作成できます。

Sr.No.	Layout & Description
1	hBox このレイアウトにより、要素を水平方向に分散できます。
2	vBox このレイアウトにより、要素を垂直に配置できます。これは、よく使用されるレイアウトの1つです。
3	Fit このレイアウトでは、コンテナは単一のパネルで満たされ、レイアウトに関連する特定の要件がない場合、このレイアウトが使用されます。
4	Card(TabPanel) このレイアウトは、さまざまなコンポーネントをタブ形式で配置します。コンテナの上部にタブが表示されます。常に1つのタブのみが表示され、各タブは異なるコンポーネントと見なされます。

Sencha Touch-履歴サポート

Sencha Touchには、完全な履歴サポートとディープリンク機能が備わっています。

最も単純な戻るボタン機能を備えており、ユーザーが画面やアプリケーションを更新しなくても画面間を移動できるようにします。

また、ユーザーが任意のURLに移動するのに役立つルート機能も提供します。ブラウザウィンドウで提供されるURLに基づいて、特定の関数を呼び出して特定のタスクを実行します。

戻るボタンの機能については、次の例をご覧ください。

この例は、リスト内のリストにすぎないネストされたリストを示しているため、リスト項目のいずれかをクリックすると、別のリストが開き、画面の上部に戻るボタンが表示されます。

完全なコードベースについては、ビューコンポーネントセクションのlink：/sencha_touch/view_nested_list [__ Nested List]を確認できます。

ルーティング

ルートの最も簡単な例

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',

   config: {
      routes: {
         login: 'showLogin',
         'user/:id': 'userId'
      }
   },

   showLogin: function() {
      Ext.Msg.alert('This is the login page');
   },
   userId: function(id) {
      Ext.Msg.alert('This is the login page specific to the used Id provided');
   }
});

上記の例で、ブラウザのURLがhttps://myApp.com/#loginの場合、showLogin関数が呼び出されます。

URLにパラメーターを指定し、特定のパラメーターに基づいて関数を呼び出すことができます。たとえば、URLがhttps://myApp.com/#user/3の場合、別の関数userIdが呼び出され、特定のIDを関数内で使用できます。

事前ルーティング

いつか、コンマ、空白スペース、特殊文字などを含む事前パラメーターがあります。このため、上記のルート作成方法を使用すると、機能しません。この問題を解決するために、Sencha touchには条件付きルーティングが用意されており、パラメーターが受け入れるデータのタイプの条件を指定できます。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login/:id: {
            action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }
         }
      },

      showLogin: function() {
         Ext.Msg.alert('This is the login page with specific id which matches criteria');
      }
   }
});

そのため、上記の例のように、URLパラメーターとして許可されるデータのタイプを明確に示す条件で正規表現を指定しました。

異なるデバイスプロファイル間で同じURLを共有する

Sencha touchはデバイスプロファイルを提供するため、同じアプリケーションコードを複数のデバイスで使用できるため、同じURLに対して異なるプロファイルが異なる機能を持つ可能性があります。

この問題を解決するために、Sencha touchを使用すると、メインコントローラーにルーティングを記述し、呼び出された関数をプロファイル固有のプロファイルとともにすべてのプロファイルに書き込むことができます。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin'
      }
   },
});
//For phone profile
Ext.define('MyApp.controller.phone.Main, {
   extend: 'MyApp.controller.Main, showLogin: function() {
      Ext.Msg.alert('This is the login page for mobile phone profile');
   }
});
//For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
   extend: 'MyApp.controller.Main,showLogin: function() {
      Ext.Msg.alert('This is the login page for tablet profile');
   }
});

例が示すように、showLogin機能を持つメインコントローラーが1つあり、2つの異なるプロファイル（電話/タブレット）があります。両方のプロファイルには、プロファイル固有の異なるコードを持つshowLogin関数があります。

このようにして、特定の機能を持つ複数のプロファイルデバイス間で同じURLを共有できます。

Sencha Touch-アップロードとダウンロード

Sencha Touchは、AjaxおよびAjax2開発で動作するXHR2構成を提供します。

XHR2はxmlHttpRequestレベル2で、サーバーからデータを要求するために使用されます。 Webアプリケーションの場合、データはサーバーに存在し、ページが読み込まれたら、Ajaxリクエストの助けを借りてサーバーからデータにアクセスする必要があります。

Sencha TouchのXHR2は、特定のリクエストで転送されたデータ量をユーザーに表示するプログレスバー機能を提供します。 XHR2が新たに追加されたため、ブラウザがサポートしているかどうかを確認する必要があります。

以下は、ブラウザがXHR2をサポートしているかどうかをチェックする機能です-

if (Ext.feature.has.XHR2) {
  //Here we can write functionality to work if browser supports XHR2
}

XHR2でのプログレッシブアップロードがブラウザでサポートされているかどうかも確認できます。

if (Ext.feature.has.XHRUploadProgress) {
  //Here we can write functionality to work if browser supports progressive uploads
}

Sencha Touchには、さまざまな新しいXHR2機能が含まれています。

Sr.No	Features & Description
1	XHR2: true これは、アプリケーションでXHR2機能を有効または無効にするために使用されます。
2	Ext.field.File 新しいファイルフィールドが追加され、フィールドのタイプについてより正確になりました。
3	Ext.field.FileInput これはFileInputを提供します。
4	Ext.progressIndicator これは、転送されたデータの正確な割合をプログレスバーで提供するためです。
5	xtype: fileinput fileInputクラスのインスタンスを作成します。
6	xtype: filefield ファイルクラスのインスタンスを作成します。
7	responseType : value このパラメーターは、テキスト、ドキュメント、blobなどのさまざまなタイプの応答を許可します。

以下は、パラメーターを使用して、または使用せずにajaxを使用してファイルをアップロードする単純なajaxリクエストを送信する例です。

パラメーターなしの単純なAjaxリクエスト-成功

<!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.setup({
            requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
               var request = {
                  url: 'https://www.finddevguides.com/sencha_touch/index',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

それは次の結果を生成します-

上記の例は、記述されたURLが正しいため、成功したajax呼び出しを示しています。この例では、パラメーターを渡していません。これは、記載されているURLにヒットする単純なajaxリクエストです。

開発者ツールでChromeブラウザを使用している場合は、ネットワークセクションに移動すると、送信されているリクエストと取得したレスポンスを確認できます。

パラメーターなしの単純なAjax要求-失敗

<!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.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],
            onReady: function() {
               var request = {
                  url: 'https://www.finddevguides.com/sencha_touch/indexx',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

それは次の結果を生成します-

上記の例では、ajaxの失敗がどのように機能するかを示すために、間違ったURLに言及しました。これと前の例を比較すると、違いがわかります。

Ajaxリクエストでパラメーターを送信する

<!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.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],

            onReady: function() {
               var formData = new FormData();
               formData.append("firstName", "Hi");
               formData.append("lastName", "Reader");

              //Request will be sent as part of the payload instead of standard post data
               var request = {
                  url: 'https://www.finddevguides.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  data: formData,
                  success: function(response) {
                     var out = Ext.getCmp("output");
                     response = Ext.JSON.decode(response.responseText, true);
                     Ext.Msg.alert(response.message);
                  },
                  failure: function(response) {
                     var out = Ext.getCmp("output");
                     Ext.Msg.alert('Ajax failed!');
                  }
               };

               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

それは次の結果を生成します-

この例では、ajax呼び出しのdataプロパティを使用して、ajaxでパラメーターを渡します。

Ajaxを使用してファイルをアップロードする

<!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.setup({
            requires: [
               'Ext.Panel',
               'Ext.MessageBox',
               'Ext.Button',
               'Ext.ProgressIndicator',
               'Ext.form.Panel',
               'Ext.field.FileInput'
            ],

            onReady: function() {
               var progressIndicator = Ext.create("Ext.ProgressIndicator", {
                  loadingText: "Uploading: {percent}%"
               });

               var request = {
                  url: 'https://www.finddevguides.com/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  progress:progressIndicator,
                  success: function(response) {
                     Ext.Msg.alert('File uploaded successfully.');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('File upload failed.');
                  }
               };

               Ext.Viewport.add(progressIndicator);
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"fileinput",
                        accept:"image/jpeg"
                     },
                     {
                        xtype:"button",
                        text: "Upload",
                        ui: 'confirm',
                        handler: function(){
                           var input = Ext.Viewport.down("fileinput").input;
                           var files = input.dom.files;
                           if (files.length) {
                              request.binaryData = files[0];
                              Ext.Ajax.request(request);
                           }else {
                              Ext.Msg.alert("Please Select a JPG");
                           }
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

それは次の結果を生成します-

この例は、ajax呼び出しを使用してデータをアップロードする方法を示しています。この例では、プログレスバーインジケーターを使用して、ファイルのアップロード中の進行状況を表示しています。

Sencha Touch-コンポーネントの表示

Sencha Touchには、要件に応じてカスタマイズできるさまざまなUIコンポーネントが用意されています。

Sr.N0.	Component & Description
1	Carousel このUIコンポーネントは、カルーセルを表示するために使用されます。
2	List このUIコンポーネントは、リストを表示するために使用されます。
3	Nested List このUIコンポーネントは、ネストされたリストを表示するために使用されます。
4	Form このUIコンポーネントは、フォームの表示に使用されます。
5	Chart このUIコンポーネントは、さまざまな種類のグラフを表示するために使用されます。
6	Floating Component このUIコンポーネントは、フローティングコンポーネントを表示するために使用されます。
7	Tab Panel このUIコンポーネントは、タブパネルビューを表示するために使用されます。
8	Navigation View このUIコンポーネントは、ナビゲーションビューの表示に使用されます。
9	Action Menu このUIコンポーネントは、アクションメニューバーを表示するために使用されます。
10	Data View このUIコンポーネントは、データビューの表示に使用されます。
11	Map このUIコンポーネントは、Googleマップを表示するために使用されます。

Sencha Touch-パッケージング

Sencha Touchには、ネイティブパッケージ機能が付属しています。

以下は、Sencha Touchのネイティブパッケージングコンセプトへのリンクです。

Sr.No.	Concept & Description Link
1	Native iOS provisioning
2	Native APIs

Sencha Touch-ベストプラクティス

JavaScriptの基本的なベストプラクティス

すべてのJavaScript関連コードを、ドキュメントセクションのheadセクションまたはインラインJavaScriptの下の <script> タグに書き込むのではなく、個別の* js（外部JS）*ファイルに保存することをお勧めします。

要素が追加のロジックで使用される前に、常にnullチェックを実行します。

他のプログラマーがコードを理解しやすくするため、常に命名規則に従ってください。

コードを簡単に理解できるようにするために、関数が行うことの背後にある明確なロジックを使用して、JSメソッドのコメントを記述することが常に推奨されます。

Sencha Touch固有のベストプラクティス

Sencha Touchが推奨するフォルダー構造を使用します。これは、JS圧縮または縮小時に役立ちます。

htmlページ自体にリスナーを記述するのではなく、コントローラーでリスナー（onclick/onblurなど）を使用することを強くお勧めします。

ストアがビューから呼び出されているときは、ストアインスタンスを作成しないでください。

ストアのインスタンスを作成するときは、パフォーマンスに影響するため、常にインスタンスを破棄する必要があります。

Sencha Touchの使用中は、他の単純なJavaScriptファイルを指定しないでください。 Extクラスのすべての関数を使用します（コントローラーまたはutilsで説明）。

モデルのマッピングと名前が同じ場合、マッピングを指定しないでください。名前だけが目的を解決します。

ビューで不要なプロパティを使用しないでください。必須のプロパティと、デフォルト値とは異なる値のみを使用してください。

Sencha-touch-quick-guide

Sencha Touch-概要

Sencha Touchの歴史

Sencha Touchの機能

Sencha Touch─利点

Sencha Touch─制限事項

Sencha Touch─ツール

Sencha SDK

煎茶CMD

煎茶検査官

Sencha Touch-環境

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

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

CDNセットアップ

人気の編集者

Sencha Touch-命名規則

Sencha Touch-アーキテクチャ

Sencha Touchアプリのプロジェクト構造

Sencha Touch-MVC

Sencha Touch-最初のプログラム

ステップ1

索引

説明

ステップ2

Sencha Touch-ビルド

カスタムビルドを使用する利点

Sencha Touch-移行

クラスシステム

MVCのアーキテクチャ

モデル

View

コントローラ

応用

Sencha Touch-コアコンセプト

Sencha Touch-データパッケージ

Sencha Touch-テーマ

デスクトップテーマ

Windowsテーマ

IOSテーマ

IOSクラシックテーマ

Androidテーマ

BlackBerryテーマ

Sencha Touch-デバイスプロファイル

簡単な電話プロファイルの作成

簡単なタブレットプロファイルの作成

起動プロセス

コントローラーの初期化機能

プロファイルの起動機能

アプリケーションの起動機能

Sencha Touch-依存関係

アプリケーションレベルの依存関係

プロファイル固有の依存関係

ネストされた依存関係

外部依存関係

Sencha Touch-環境検出

オペレーティング・システム

デバイス検出

オペレーティングシステムのバージョン

ブラウザ検出

特徴

Sencha Touch-イベント

イベントの書き込み方法

リスナーを使用した組み込みイベント

Sencha Touchでリスナーを書く

同じリスナー内の複数のイベント

後でイベントを添付する

カスタムイベント

Sencha Touch-レイアウト

Sencha Touch-履歴サポート

ルーティング

事前ルーティング

異なるデバイスプロファイル間で同じURLを共有する

Sencha Touch-アップロードとダウンロード

パラメーターなしの単純なAjaxリクエスト-成功

パラメーターなしの単純なAjax要求-失敗

Ajaxリクエストでパラメーターを送信する

Ajaxを使用してファイルをアップロードする

Sencha Touch-コンポーネントの表示

Sencha Touch-パッケージング

Sencha Touch-ベストプラクティス