在ST2应用程序中使用适当的组件

Question

我有一个非常简单的移动应用程序，我想用Sencha Touch 2构建。我有很多使用ExtJs的经验，但不是真的使用他们的MVC架构。我想要实现的是：

• 首先是一个带有工具栏的主屏幕和一些在中间呈现的图标，用于浏览应用程序功能。
• 单击其中一个图标应切换到带有可滚动列表的屏幕。

我所挣扎的是定义视图和控制器的适当位置。还应该例如主屏幕使用控制器？我应该手动创建视口吗？

我现在所拥有的，它不会渲染任何工具栏：

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（根本不渲染，但不会抛出任何错误）。