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

Question

私は2つのビューを持っています。ユーザービューには、テキストとボタンがあります。私はそのボタンを使用して2番目のビューに切り替える必要があります。

Uncaught Error: SYNTAX_ERR: DOM Exception 12

これは基本的にどのようにある：しかし、私は（最初の図である）「UserView」のボタンを押すと、私は次のエラーを取得するこれは煎茶タッチ2で動作する方法がわかりません私のコードは、今になります

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'); 
       } 
      } 
     }); 
    } 
}); 

そして、二つのビュー：ここ

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

第二ビュー

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 Forumsをチェックアウトするだけでなく、Sencha Touch API Docsに大きなガイドをオーバーチェックアウトをお勧めします。