ボタンでビューを切り替えます

Question

私は2つのビューを持っています。ユーザービューにはテキストとボタンがあります。そのボタンを使って2番目のビューに切り替えたいです。しかし、これがSencha Touch 2でどのように機能するかわかりません。

アカウントエラー：syntax_err：DOM例外12

これは基本的に私のコードが今見ている方法：

app.js

Ext.Loader.setConfig({ enabled: true });

Ext.setup({
    viewport: {
        autoMaximize: false
    },
    onReady: function() {
        var app = new Ext.Application({
            name: 'AM',
            controllers: [
                'Main'
            ]
        });
    }
});

.

メインコントローラ

Ext.define('AM.controller.Main', {
    extend: 'Ext.app.Controller',
    views : ['User'],
    init: function() {
        this.getUserView().create();

        this.control ({
            '#new': {
               tap: function() {
                    alert('aaaa');
               }
            }
        });
    }
}); 

.

と2つの視点：

Ext.define('AM.view.User', {
    extend: 'Ext.Container',
    config: {
        fullscreen:true,
        items: [{
                xtype: 'button',
                text: 'New',
                id: 'new'
            }
        ],
        html: 'Testing<br />'
    }
}); 

.

第2景色

Ext.define('AM.view.New', {
    extend: 'Ext.Container',
    config: {
        fullscreen: true,
        html: 'w00t'
    }
});

.

Answer 1

これはあなたの申請書がそれがあるべき道を書いたことです。ここに私が行った変更についていくつかのノートがあります：

• MVCアプリケーションを作成するときにExt.applicationの代わりにExt.setupを呼び出す必要があります。
• すべてのルートビューは、 app.js の内部で定義する必要があります。
• コントローラにthis.control()を使用する必要がなくなりました。 Configブロックでコントロール構成を単純に使用できます。
• viewsのExt.application設定ですべてのビューを定義する必要があります。
• initでビューを作成する代わりに、launchで実行します。これはコンポーネントをビューに追加する必要があります。

  アプリ/ビュー/ user.js

  Ext.define('AM.view.User', {
      extend: 'Ext.Container',
  
      config: {
          items: [
              {
                  xtype: 'button',
                  text: 'New',
                  id: 'new'
              }
          ],
          html: 'Testing<br />'
      }
  });
  

  .

  アプリ/ビュー/ new.js

  Ext.define('AM.view.New', {
      extend: 'Ext.Container',
      config: {
          html: 'w00t'
      }
  });
  

  .

  アプリ/コントローラ/ main.js

  Ext.define('AM.controller.Main', {
      extend: 'Ext.app.Controller',
  
      config: {
          control: {
              '#new': {
                  // On the tap event, call onNewTap
                  tap: 'onNewTap'
              }
          }
      },
  
      launch: function() {
          // When our controller is launched, create an instance of our User view and add it to the viewport
          // which has a card layout
          Ext.Viewport.add(Ext.create('AM.view.User'));
      },
  
      onNewTap: function() {
          // When the user taps on the button, create a new reference of our New view, and set it as the active
          // item of Ext.Viewport
          Ext.Viewport.setActiveItem(Ext.create('AM.view.New'));
      }
  });
  

  .

  app.js

  Ext.application({
      name: 'AM',
  
      // Include the only controller
      controllers: ['Main'],
  
      // Include all views
      views: ['User', 'New'],
  
      // Give the Ext.Viewport global instance a custom layout and animation
      viewport: {
          layout: {
              type: 'card',
              animation: {
                  type: 'slide',
                  direction: 'left',
                  duration: 300
              }
          }
      }
  });
  

  .

  私はまた、 Sencha Touch API Docs Senchaフォーラムをチェックアウトするだけでなく、非常にアクティブで、情報の素晴らしい情報源です。