sencha app build producing duplicate components - extjs

Question

I have finished an application and I am in the process of minification. When I build the application I am getting duplicate components rendered. I noticed this when I was testing the application. Whenever I have a grid, there is another one getting painted under it with the same exact attributes. I used Ext.ComponentMgr.all.map to see all my application's components- when I did this I noticed that the un-built version had 1 app-main components and the minified had 2. At first I thought I could attribute this to warnings or errors in the un-built version. But when I run it in chrome/IE, I am not seeing any console warnings or errors.
Is there any way to tell what is causing this error? Below is my main view that gets invoked in the Viewport.js file. each of those views have their respective aliases defined properly.
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: {
.....
}});
This is what my app.js looks like:
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
});
I have placed console.logs and made beforerender listeners on the grids that get duplicated. Again, in the minified version I see two logs in the console and in the un-minified, I only see one.
Still battling this - here is an example of one of the grids that gets duplicated
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

I hacked my way through this problem. I handled it in the beforerender function of each of the duplicate components. Since I noticed that the renderer was rendering the same exact item, I took the liberty of deleting it and everything that was attached to the previous version.
beforerender: function(component, eOpts){
if(!alreadyRendered){
alreadyRendered = true;
previousComponent = component;
}
else{
previousComponent.removeAll(true);
}
}