Question

我已经完成了一个应用程序，我正处于缩小的过程中。当我构建应用程序时，我正在获取重复的组件。我在测试应用程序时注意到了这一点。每当我有一个网格时，就会有另一个网格在其下面绘制，具有相同的属性。我使用Ext.ComponentMgr.all.map查看我的所有应用程序的组件 - 当我这样做时，我注意到未构建的版本有1个app-main组件，而minified有2个。起初我以为我可以将此归因于警告或未构建版本中的错误。但是当我在chrome / IE中运行它时，我没有看到任何控制台警告或错误。

有没有办法告诉导致此错误的原因？下面是我在Viewport.js文件中调用的主视图。每个视图都正确定义了各自的别名。

Ext.define('MPL.view.MPLView', {
extend: 'Ext.container.Container',
requires: [
    'Ext.grid.Panel',
    'MPL.view.QuotePanelView',
    'MPL.view.SearchPanelView',
    'MPL.view.PartsPanelView',
    'MPL.view.SvcPartsPanelView',
    'MPL.view.ConsumedPartsView'
],
xtype: 'app-main',
layout: 'column',
overflowY: 'auto',
items: [
    {
        xtype: 'SearchPanel',
        columnWidth: 1
    },
    {
        xtype: 'QuoteGrid',
        columnWidth: 1,
        overflowY: 'auto',
        height: 200
    },
    {
        xtype: 'PartGrid',
        overflowY: 'auto',
        columnWidth: 1,
        height: 250,
        margin: '20 0 0 0',
        hidden: true
    },
    {
        xtype: 'SvcPartsGrid',
        overflowY: 'auto',
        columnWidth: 1,
        height: 250,
        margin: '20 0 0 0',
        hidden: true
    },
    {
        xtype: 'ConsumedPartsGrid',
        overflowY: 'auto',
        columnWidth: 1,
        height: 250,
        margin: '20 0 0 0'
    }
],
listeners: {
    .....
}});

这就是我的app.js的样子：

Ext.Loader.setConfig({
enabled : true
});

Ext.application({
name : 'MPL',

extend : 'MPL.Application',

appFolder : 'app',

requires : [ 'overrides.Theme' ],

controllers : [ 'MPLController' ],
models : [
    'MPLModel',
    'SearchCriteriaModel',
    'PartsModel',
    'LaborCodeModel',
    'PartFieldsModel',
    'SourceModel',
    'PartsActionModel',
    'ConsumedPartsModel'
],
stores : [
    'MPLStores',
    'SearchCriteriaStore',
    'PartsStore',
    'LaborCodeStore',
    'PartFieldsStore',
    'SourceStore',
    'PartsActionStore',
    'ConsumedPartsStore'
],

autoCreateViewport : true
});

我已经放置了console.logs，并在重复的网格上制作了更早的侦听器。同样，在缩小版本中，我在控制台中看到两个日志，在未缩小的版本中，我只看到一个。

仍在与此作斗争 - 这是一个重复的网格的例子

Ext.define('MPL.view.QuotePanelView', {
alias: 'widget.QuoteGrid',
extend: 'Ext.grid.Panel',
id: 'QuotePanel',
store: 'MPLStores',
columns: [
    { header: MPL.str.getQuoteIdHeader(), dataIndex: 'quoteId', flex: .9},
    { header: MPL.str.getManufacturerHeader(), dataIndex: 'manufacturer', flex: 1.2},
    { header: MPL.str.getVinHeader(), dataIndex: 'vin', flex: 2},
    { header: MPL.str.getYearHeader(), dataIndex: 'year', flex:.8},
    { header: MPL.str.getMakeHeader(), dataIndex: 'make', flex: 1},
    { header: MPL.str.getModelHeader(), dataIndex: 'model', flex: 1},
    { header: MPL.str.getSalesIdHeader(), dataIndex: 'salesPersonId', flex: 1.23},
    { header: MPL.str.getCustIdHeader(), dataIndex: 'customerId', flex: 1},
    { header: MPL.str.getQuoteStatusHeader(), dataIndex: 'status', flex: 1},
    { header: MPL.str.getCreatedDateHeader(), dataIndex: 'createdOn', dateFormat: "Y-m-d", flex: 2}
],
listeners: {
    itemclick: function(dv, record, item, index, e) {
        MPL.app.fireEvent("FindParts", dv, record, item, index, e);
    },
    beforerender: function(component, eOpts){
        console.log(' id - ' + component.getId());
    }
}
});

Answer 1

我在这个问题上遇到了困难。我在每个重复组件的beforerender函数中处理它。由于我注意到渲染器渲染了相同的项目，因此我冒昧地删除它以及附加到先前版本的所有内容。

beforerender: function(component, eOpts){
        if(!alreadyRendered){
            alreadyRendered = true;
            previousComponent = component;
        }
        else{
            previousComponent.removeAll(true);
        }
    }

sencha app build生成重复的组件

1 个答案: