0

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

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

我正在努力的是定义视图和控制器的正确位置。以及例如主屏幕是否应该使用控制器？我应该手动创建视口吗？

我现在所拥有的，除了工具栏之外没有渲染任何东西：

应用程序.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'));
    }
})

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

4

0 回答 0