model-view-controller - ST2 アプリケーションでの適切なコンポーネントの使用

Question

Sencha Touch 2 で構築したい非常にシンプルなモバイルアプリがあります。ExtJ についてはかなりの経験がありますが、MVC アーキテクチャについてはあまり詳しくありません。私が達成したいのは：

• まず、アプリの機能間を移動するために使用されるツールバーといくつかのアイコンが中央にレンダリングされたメイン画面。
• アイコンの 1 つをクリックすると、スクロール可能なリストのある画面に切り替わります。

私が苦労しているのは、ビューとコントローラーを定義する適切な場所です。たとえば、メイン画面でコントローラーを使用する必要がありますか? ビューポートを手動で作成する必要がありますか?

私が今持っているものは、ツールバー以外には何もレンダリングされていません:

app.js

Ext.application({
    name: 'SG',

    views: [
        'Main',
        'MainScreen'
    ],

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('SG.view.Main'));
    }
})

Main.js

Ext.define('SG.view.Main', {
    extend: 'Ext.Container',
    requires: [
        'Ext.TitleBar',
        'ShopGun.view.MainScreen'
    ],
    config: {
        layout : 'fit',

        items: [
            {
                title: 'Welcome',
                iconCls: 'home',
                position: 'top',
                scrollable: true,

                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'SG Alpha 1'
                    }
                    Ext.create('SG.view.MainScreen', {
                        docked: 'bottom'
                    })
                ]
            }
        ]
    }
});

MainScreen.js

Ext.define('SG.view.MainScreen', {
    extend: 'Ext.Container',
    xtype: 'mainScreen',

    initialize : function(){

        Ext.define("MenuIcon", {
            extend: "Ext.data.Model",
            config: {
                fields: [
                    {name: "Name", type: "string"},
                    {name: "Icon",  type: "string"}
                ]
            }
        });

        this.store = Ext.create('Ext.data.Store', {
            model: 'MenuIcon',
            data: [
                {
                    Name: "A",
                    Icon: "a.png"
                },
                {
                    Name: "B",
                    Icon: "b.png"
                }
            ]
        });

        this.html = 'foo';

        this.callParent(arguments);
    }
});

そして最後に、私が取得したいもののイメージ:

---

編集：

Senchafiddle のデモ: http://www.senchafiddle.com/#jSqtV (まったくレンダリングされませんが、エラーは発生しません)。