Extjs Tabpanel Resize - extjs

Question

I've implemented an EXTJS 4.0 tabpanel containing two grids.
This all runs fine when i first load it. But when i go to another panel( not a child of the tabpanel) and then reload the tabpanel in the viewport OR resize my browser window, the HTML child homeclients (my grid) dissappears ( and it's HTML element is removed from the tabpanel).
Anybody have any idea why this is happening ?
Tabpanel:
Ext.define('EY.view.center.home.container.Panel', {
extend: 'Ext.tab.Panel',
alias: 'widget.containerhome',
id: 'containerhome',
activeTab: 1,
border: false,
resizeTabs:true,
items: [{
title: 'Most Used clients',
iconCls: 'tabIcon',
xtype: 'mostUsedClients',
id: 'mostUsedClients',
scale: 'large'
},{
title: 'All Clients',
xtype: 'homeclients',
id: 'homeclients',
scale: 'large'
}
],
requires: [
'EY.view.center.home.client.Grid',
'EY.view.center.home.client.mostUsedClients.mostUsedClients'
],
initComponent: function () {
Ext.apply(this, {
})
this.callParent(arguments);
}
});
Grid:
Ext.define('EY.view.center.home.client.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.homeclients',
id: 'homeclients',
baseCls: 'homeclients',
//frame:true,
store: 'Clients', //Ext.data.StoreManager.lookup('serviceStore'),
contextMenu: undefined,
border: false,
//flex: 1,
padding: 3,
hideHeaders: true,
columns: [
{ header: 'CLIENTS', field: 'textfield', flex: 1 }
],
features: [
Ext.create('Ext.grid.feature.RowBody', {
getAdditionalData: function (data, rowIndex, rec, orig) {
var headerCt = this.view.headerCt;
var colspan = headerCt.getColumnCount();
return {
rowBody: createHtml(rec),
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
}),
{
ftype: 'rowwrap'
}
],
viewConfig: {
listeners: {
itemclick: function (list, index, target, record, event) {
if (event.target.id == 'grandAccess') {
var windowIsClosed = Ext.getCmp('ConfirmationWindow');
if (!windowIsClosed) {
var clientId = index.data.id;
var clientVat = index.data.rn;
eDocsUser.currentClientName = index.data.n;
eDocsUser.currentClientId = clientId;
eDocsUser.currentClientRegisterNummer = clientVat;
showGrantAccesWindow(index);
}
} else {
if (Ext.getCmp('ConfirmationWindow')) {
Ext.getCmp('ConfirmationWindow').hide();
}
loadDataOfSelectedClient(index);
}
}
}
},
initComponent: function () {
this.callParent(arguments);
}
});

Answer 1

We solved this by changing the grid to a dataview for the resizing problem (grids rly cause a lot of problems for me tbh).
And then we fixed the other problem by changing :
layout.setActiveItem(Ext.getCmp('containerhome'), {
type: 'slide',
direction: 'left',
duration: 5000
});
to
layout.setActiveItem(0);
We (but not me ... :D ) created a new item instead of calling the old one in the card panel.