javascript - 在 sencha 的主视图中包含多个视图

Question

我需要做一个应用程序，其中有单独的模块，如用户、类别。我想为所有这些创建单独的视图，然后最后想调用主视图。我是煎茶的新手。这个怎么做？

Ext.application({
    name: 'AM',

    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                   //need to replace this with app.views.userPage,how??????????
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                },
                {
                    xtype: 'panel',
                    title: 'category',
                    html : 'List of category will go here'
                }

            ]
        });
    }
});

Answer 1

在 github 上 Francis Shanahan 以 MVC 风格构建了一个简单的 sencha touch 2 应用程序，如果您可以按照他如何定义视图然后使用别名配置来定义自定义 xtypes 那么它应该回答您的问题。https://github.com/FrancisShanahan/SenchaTouch2MVCHelloworld

Answer 2

you must have folder structure like that:
 -YourApp
   --app.js // here is your Ext.application
   --app
     --view
       --Users
       --Category
     --model
     --controller

用户.js：

Ext.define('TheApp.view.Users', {
  extend: 'Ext.Panel',
  xtype: 'userspanel',
  config: {
    // here are some config opts...
  }
});

应用程序.js

Ext.application({
  name: 'TheApp',
  views: [
    'Users',
    'Category'
  ],
  viewport: {
    autoMaximize: true
  },

  launch: function() {
    Ext.Viewport.add({ xtype: 'userspanel' });
  }