EXTJS reuse alias become nonfunctional tab

Question

i have default 4 tabs with vehicle manage, driver manage, location manage, route manage.
and i have a toolbar able to recreate the Vehicle Manage tab

this is the toolbar i have mention, so when we create a new vehicle manage tab, will cause the all tabs unfunctional. Maybe i Reuse the gridpanel in new Vehicle Manage?

here is my example code:

vehicle.js

Ext.define('MyApp.view.MyVehicleGridPanel', {
   extend: 'Ext.grid.Panel',
   id : 'mygridpanel',
   //renderTo : 'vehiclebody',
   alias: 'widget.mygrid',
   header: false,
   store: UserStore,
   multiSelect: false,
   columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: '_id',

                    text: 'Vehicle ID'
                },
                {
                    xtype: 'gridcolumn',
                    width: 126,
                    dataIndex: 'Plat_No',
                    text: 'Plat Number'
                },
                {
                    xtype: 'gridcolumn',
                    width: 200,
                    dataIndex: 'Name',
                    text: 'Added By'
                }
]
})

when user clicked the toorbar will use the alias mygrid again.

this is my toolbar code:

var BtnVehicle = Ext.getCmp('BtnVehicle');
    BtnVehicle.on('click', function(){
        tabs.add({
            closable: true,
            xtype : 'mygrid',
            //html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="vehicle/vehicle.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
            iconCls: 'bus32',
            title: 'Vehicle Manage'
        }).show();
    })

whenever user able to create unlimit tab with the same design same gridpanel.

how come when create a second same xtype: 'mygrid' then the tab will become nonfunctional?

Answer 1

Remove id from GridPanel config, instead use itemId & search Components within Ext.ComponentManager (globally) or a specific Ext.container.Container on the document with a similar syntax to a CSS selector using Ext.ComponentQuery

refer docs