1
votes

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).

enter image description here

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);

    }
});
1
Can you post the code of your grids and tabpanel?Wilk

1 Answers

0
votes

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.