生产构建中的应用程序中断答案

【问题标题】：Application breaks in production build生产构建中的应用程序中断
【发布时间】：2020-09-04 06:09:45
【问题描述】：

在大约 2 年的时间里，我在“Sencha Support”创建了一个工单，在那里我解释并展示了一个破坏了我的整个应用程序的错误。

所以我重新打开了这张票并询问是否有任何解决方案，因为我们想要发布我们的应用程序并且需要这个生产构建......

答案是“请注意，目前没有解决问题的时间表……”……但是您可以支付更多的钱……等待 2 年后……支付我们的软件和支持费用。 . 即使这是一个错误..

所以我想请社区帮助我解决这个问题..

如果您使用 ExtJS V6.5.3 -> 7.2.1、现代工具包创建以下内容，并且您必须使用 SenchaCmd/SenchaArchitect 进行生产构建！

Ext.define('Test.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',
    requires: [
        'Ext.MessageBox',
        'Ext.layout.Fit'
    ],
    controller: 'main',
    viewModel: 'main',
    defaults: {
        tab: {
            iconAlign: 'top'
        }
    },
    tabBarPosition: 'bottom',
    tabBar: {
        layout: {
            type: 'box',
            pack: 'start',
            overflow: 'scroller'
        }
    },
    items: [
        // TODO - Replace the content of this view to suit the needs of your application.
        {
            title: 'Home',
            iconCls: 'x-fa fa-home',
            layout: 'fit',
            // The following grid shares a store with the classic version's grid as well!
            items: [{
                xtype: 'mainlist'
            }]
        }, {
            title: 'Users',
            iconCls: 'x-fa fa-user',
            bind: {
                html: '{loremIpsum}'
            }
        }, {
            title: 'Groups',
            iconCls: 'x-fa fa-users',
            bind: {
                html: '{loremIpsum}'
            }
        }, {
            title: 'Settings',
            iconCls: 'x-fa fa-cog',
            bind: {
                html: '{loremIpsum}'
            }
        }
    ]
});

编译后你会看到这样的错误：

app.js?_dc=1599337408898:46636 Uncaught TypeError: Cannot read property 'update' of undefined
    at constructor.applyOverflow (app.js?_dc=1599337408898:46636)
    at constructor.setter [as setOverflow] (app.js?_dc=1599337408898:5728)
    at Ext.Configurator.configure (app.js?_dc=1599337408898:6036)
    at constructor.initConfig (app.js?_dc=1599337408898:6675)
    at constructor (app.js?_dc=1599337408898:10235)
    at constructor (app.js?_dc=1599337408898:37826)
    at constructor.callParent (app.js?_dc=1599337408898:6650)
    at constructor (app.js?_dc=1599337408898:46423)
    at new Ext.layout.Box (app.js?_dc=1599337408898:6978)
    at Ext.Factory.create (app.js?_dc=1599337408898:11479)
applyOverflow   @   app.js?_dc=1599337408898:46636
setter  @   app.js?_dc=1599337408898:5728
configure   @   app.js?_dc=1599337408898:6036
initConfig  @   app.js?_dc=1599337408898:6675
constructor @   app.js?_dc=1599337408898:10235
constructor @   app.js?_dc=1599337408898:37826
callParent  @   app.js?_dc=1599337408898:6650
constructor @   app.js?_dc=1599337408898:46423
Ext.layout.Box  @   app.js?_dc=1599337408898:6978
create  @   app.js?_dc=1599337408898:11479
fn  @   app.js?_dc=1599337408898:11577
applyLayout @   app.js?_dc=1599337408898:37072
setter  @   app.js?_dc=1599337408898:5728
configure   @   app.js?_dc=1599337408898:6036
initConfig  @   app.js?_dc=1599337408898:6675
constructor @   app.js?_dc=1599337408898:10235
constructor @   app.js?_dc=1599337408898:20866
callParent  @   app.js?_dc=1599337408898:6650
constructor @   app.js?_dc=1599337408898:24330
callParent  @   app.js?_dc=1599337408898:6650
constructor @   app.js?_dc=1599337408898:36941
callParent  @   app.js?_dc=1599337408898:6650
constructor @   app.js?_dc=1599337408898:46669
Ext.tab.Bar @   app.js?_dc=1599337408898:6978
eval    @   VM95:3
create  @   app.js?_dc=1599337408898:7870
factory @   app.js?_dc=1599337408898:5196
applyTabBar @   app.js?_dc=1599337408898:49637
setter  @   app.js?_dc=1599337408898:5728
(anonymous) @   app.js?_dc=1599337408898:5719
updateTabBarPosition    @   app.js?_dc=1599337408898:49660
setter  @   app.js?_dc=1599337408898:5732
configure   @   app.js?_dc=1599337408898:6047
initConfig  @   app.js?_dc=1599337408898:6675
constructor @   app.js?_dc=1599337408898:10235
constructor @   app.js?_dc=1599337408898:20866
callParent  @   app.js?_dc=1599337408898:6650
constructor @   app.js?_dc=1599337408898:24330
callParent  @   app.js?_dc=1599337408898:6650
constructor @   app.js?_dc=1599337408898:36941
tabtest.view.MyTabPanel @   app.js?_dc=1599337408898:6978
eval    @   VM95:3
create  @   app.js?_dc=1599337408898:7870
launch  @   app.js?_dc=1599337408898:50015
onBeforeLaunch  @   app.js?_dc=1599337408898:36111
onProfilesReady @   app.js?_dc=1599337408898:36065
constructor @   app.js?_dc=1599337408898:36045
tabtest.$application    @   app.js?_dc=1599337408898:6978
(anonymous) @   app.js?_dc=1599337408898:36227
invoke  @   app.js?_dc=1599337408898:8964
doInvokeAll @   app.js?_dc=1599337408898:8989
invokeAll   @   app.js?_dc=1599337408898:8971
handleReady @   app.js?_dc=1599337408898:8945
(anonymous) @   app.js?_dc=1599337408898:8953
elevate @   app.js?_dc=1599337408898:2426
timerFn @   app.js?_dc=1599337408898:4115
setTimeout (async)      
defer   @   app.js?_dc=1599337408898:4117
handleReadySoon @   app.js?_dc=1599337408898:8951
fireReady   @   app.js?_dc=1599337408898:8936
doReadyEvent    @   app.js?_dc=1599337408898:9027
onReadyEvent    @   app.js?_dc=1599337408898:9015
bind    @   app.js?_dc=1599337408898:8906
(anonymous) @   app.js?_dc=1599337408898:9114
(anonymous) @   app.js?_dc=1599337408898:9115

【问题讨论】：

你之前尝试过构建testing吗？
你能发布整个日志吗？顺便说一句……煎茶支持太糟糕了！
我编辑了我的帖子以显示整个日志

标签： javascript extjs sencha-architect

【解决方案1】：

查看Ext.tab.Bar的文档：

TabBar 由 Ext.tab.Panel 在内部使用，通常不需要手动创建。

... 它甚至没有 layout 配置 - 也没有布局 box；只有hbox & vbox。

【讨论】：

我改成hbox了，还是不行
没有layout 配置；那你为什么要配置一个？
在文档中我发现了这个：docs.sencha.com/extjs/7.2.0/modern/Ext.tab.Bar.html#cfg-layout 我需要它来强制左侧排列而不是居中排列。就像我之前提到的，如果我只是发布它一切正常，那么构建和发布版本之间肯定存在差异
它试图绑定overflow: 'scroller' ...但是没有update() 方法。 layout 仅由 docked 配置定义。您的示例不足以重现任何内容。
一个足够的例子是什么样的，也许我可以提供一个例子？

【解决方案2】：

你必须要求新的布局。

classic
    requires: [..., 'Ext.layout.container.Box']
modern
    requires: [..., 'Ext.layout.Box']

通常，如果某些东西在开发中而不是在生产中有效，那么您就缺少了需求。从您发布的代码中，我无法确切说明您需要 viewModel 和 viewController。首先尝试将以下内容添加到 app 文件夹中的 Application.js 并从 app.js 中删除要求：

requires: [
    'Test.*',
    'Ext.*'
],

这会将所有内容添加到您的构建应用程序中。！！！虽然我不建议以这种方式发货。！！！

背景：如果您添加一个面板，那么您会即时添加大量需求。但在您的应用中至少需要一次额外的布局。

当您更改代码时，请尝试使用最佳实践

    viewModel: {type: 'main'},

【讨论】：

【解决方案3】：

尝试在您的需求配置中包含Ext.layout.overflow.Scroller：

requires: [
    'Ext.MessageBox',
    'Ext.layout.Fit',
    'Ext.layout.overflow.Scroller'
],

它对我有用。

【讨论】：