Sencha Touch-コントローラー

コントローラは、MVCアーキテクチャの主要コンポーネントの1つです。

コントローラは、機能を制御するコンポーネントです。コントローラーでリスナーを作成し、ビューとモデルの間の接着剤として機能します。ビューは視覚的なUI用であり、モデルはデータの保存と操作用です。

コントローラの主な機能は次のとおりです-

アクションは、アプリケーションでボタンを押すか、何らかのリンクにカーソルを合わせるかのようにコントローラーに書き込まれ、実行する必要のあるアクションはコントローラーリスナー関数に書き込まれます。
コントローラーにはinitおよび起動機能があり、アプリケーションとコントローラーが起動されると呼び出されます。

コントローラーの初期化および起動機能

コントローラーで起動および初期化機能を定義できます。アプリケーションは独自の起動関数を持つことができるため、関数が呼び出される順序を以下に示します。

コントローラーの初期化関数は、アプリケーションの起動時に最初に呼び出されます。
次に、アプリケーションの起動関数が呼び出されます。
アプリケーションの起動が呼び出され、アプリケーションが起動されると、コントローラーの起動機能が呼び出されます。

コントローラーの構成コンポーネント

コントローラの設定で参照と制御を行うことができます。両方の仕組みを見てみましょう。

Refs

configの参照は、次の例に示すように使用できます。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      refs: {
         tab: '#divId
      }
   },

   addLogoutButton: function() {
      this.getTab().add({
         text: 'Logout'
      });
   }
});

Refは、任意のIDを参照するために使用できます。上記の例で見るように、タブはid #divIdを参照する作成されたrefです。

上記の例のように、refはキーと値のペアで作成されます。tabはキーで、divIdは値です。 refが作成されるたびに、getsとsetterが同じものに対して自動的に作成されます。上記の例では、refをタブとして作成したため、getTabメソッドとしてアクセスできます。これは自動的に作成されます。

コントロール

コントロールは、refをキーとして、値をリッスン関数として受け取るrefに似た構成であり、いくつかのタスクを実行するために呼び出されます。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      control: {
         loginButton: {
            tap: 'doLogin'
           //ref tap is the key and doLogin is the value which is a listener.
         }
      },

      refs: {
         loginButton: 'button[action=login]'
      }
   },

   doLogin: function() {
     //called whenever the Login button is tapped
   }
});

ルート

コントローラーは、関心のあるルートを定義します。ルートの助けを借りて、アプリケーションの任意の部分を提供されたルートにリンクできます。

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller', config: {
      routes: {
         login: 'showLogin',
         'user/:id': 'userId'
      }
   },

   showLogin: function() {
     //statements
   },
   userId: function() {
     //statements
   }
});

ルートには、ブラウザのアドレスバーURLを使用してアクセスできます。

上記の例では、ユーザーがhttps://myApp.com/#loginのURLにアクセスするとshowLoginコントローラー関数が呼び出されます。

ブラウザーのURLがhttps://myApp.com/#user/3003の場合、userId関数が呼び出されるなど、ワイルドカードを使用してルートを呼び出すこともできます

したがって、ブラウザーのURLが変更されるたびに、ルートは特定のコントローラー関数を自動的に呼び出します。

Sencha-touch-controllers

目次

Sencha Touch-コントローラー

コントローラーの初期化および起動機能

コントローラーの構成コンポーネント

Refs

コントロール

ルート