cordova - 如何使用 Sencha UI 的通用代码？

Question

在我的应用程序中，我在所有屏幕中都有一个顶部栏和底部标签栏。因此，当用户单击特定选项卡时，它只会更改屏幕的中间部分（选项卡栏和工具栏将相同）。所以我想为这个标签栏和工具栏写一些通用代码。那么我应该在哪里保留这些通用代码？它在视图文件夹中吗？

如果有人可以分享一些代码或示例项目，那将对我有所帮助。

提前致谢。

Answer 1

似乎您要构建一个高度优化的应用程序。

最佳做法是：

1) 您的MainView.js应该如下所示：

Ext.define('app.views.MainView', {
  extend: 'Ext.Container' // container is the best way almost time
  config: {
    layout: 'card' // just for example
    items: [
       {xtype: 'MainTopToolbar'},
       {xtype: 'DynamicView'},
       {xtype: 'MainTabBar'},
    ]
    // other configs go here...
  }
})

此步骤的目的是为您的应用程序定义一个整体布局。如您所见，它包含 3 个主要组件（第二个是动态的 - 您将根据用户的交互进行更改）。

2) 定义您的xtypes，例如MainTabBar：

Ext.define('app.views.MainTabBar', {
  extend: 'Ext.TabBar',
  xtype: 'MainTabBar'.
  config: {
    docked: 'bottom',
    items: [
       // your tabs are defined here, see Ext.TabBar docs for more details
    ]
    // other configs go here...
  }
})

3) 将所有 xtypes 定义文件以及MainView.js放在视图文件夹中。

4) 在app.js中，调用Ext.create('app.views.MainView');

这个问题比较笼统，也有点复杂，请大家花点时间集思广益。如果有什么清楚的，请告诉我。