Sencha Touch V2でMVCビューを正しく有効にする方法

Question

私はSencha Touch V2ベータ版を実行していますが、ほとんどrecent documentationです。

私はExt.applicationの指示に従っており、MVCアプリケーションを適切にレイアウトしようとしています。残念ながら、このアプローチで実際にビューをロードする方法を理解することはできません。

index.js

Ext.application({ 

    name: 'rpc', 
    defaultUrl: 'home/index', 
    controllers: ['home'], //note: define controllers here 
    launch: function() { 

     console.log('Ext.application ~ launch'), 

     Ext.create('Ext.TabPanel', { 
      id: 'rpc-rootPanel', 
      fullscreen: true, 
      tabBarPosition: 'bottom', 
      items: [{ 
       title: 'Home', 
       iconCls: 'home' 
      }] 
     }); 

     Ext.create('Ext.viewport.Viewport', { 
      id:'rpc-rootPanel', 
      fullscreen: true, 
      layout: 'card', 
      cardSwitchAnimation: 'slide' 
     }); 

    } 
}); 

homeController.js

Ext.define('rpc.controller.home', { 
    extend: 'Ext.app.Controller', 
    views: ['home.index'], 
    stores: [], 
    refs: [], 
    init: function() { 
     console.log('rpc.controller.home ~ init'); 
    }, 

    index: function() { 
     console.log('rpc.controller.home ~ index'); 
    } 
}); 

indexView.js

Ext.define('rpc.view.home.index', { 
    extend: 'Ext.Panel', 
    id: 'rpc-view-home-index', 
    config: { 
     fullscreen: true, 
     layout: 'vbox', 
     items: [{ 
      xtype: 'button', 
      text: 'Videos', 
      handler: function() { 
      } 
     }], 
     html:'test' 
    } 
}); 

あなたがbの可能性があるすべてのヘルプeを提供することができれば幸いです。

Answer 1

新しいリリースはExtJSの4で導入されたMVCのコンセプトを次の煎茶タッチは、同じarch.Hereが私のフォルダ構造で、次のされますので、あなたはArchitecture guideをお読みください：

アプリケーションの開発時に、 htmlでsencha-touch-all-debug-w-comments.jsを使用する必要があります。これは、アプリケーションのデバッグに役立ちます。私は、エイリアス（： 'ホームページ' XTYPE）を使用して、ホームページのビューが含まれているか、

Ext.Loader.setConfig({enabled: true}); 
Ext.application({ 
    name: 'rpc', 
    appFolder: 'app',   
    controllers: ['Home'], 
    launch: function() { 

     Ext.create('Ext.tab.Panel',{ 
      fullscreen: true,   
      tabBarPosition: 'bottom', 
      items:[{ 
       title: 'Home', 
       iconCls: 'home', 
       html: '<img src="http://staging.sencha.com/img/sencha.png" />' 
      },{ 
       title: 'Compose', 
       iconCls: 'compose', 
       xtype: 'homepage' 
      }]   
     });  
    } 
}); 

注：ここでは

は、アプリケーションのクラスです。ここで

はコントローラです：

Ext.define('rpc.controller.Home', { 
    extend: 'Ext.app.Controller', 
    views: ['home.HomePage'], 
    init: function() {  

     console.log('Home controller init method...'); 
    }  
}); 

そして最後に、私のホームページビュー：

Ext.define('rpc.view.home.HomePage', { 
    extend: 'Ext.Panel',  
    alias: 'widget.homepage', 
    config: {    
     html: '<img src="http://staging.sencha.com/img/sencha.png" />' 
    }, 
    initialize: function() { 
     console.log("InitComponent for homepage");  
     this.callParent(); 
    }  
}); 

エイリアスプロパティは、必要なときにクラスのインスタンスをインスタンス化するために使用されます。また、Ext.createメソッドを使用することもできます。

これは、あなたがSencha Touchを使い始めるのに役立つことを願っています。

Answer 2

偉大な答えAbdel。この回答で示されているよう

また、それは、プロファイルかかわらず行うことができます。 Sencha Touch 2.0 MVC tutorial