ExtJs5 -Ext.View.View gets hidden beneath the Ext grid and only reappears after a refresh

Question

I have a page rendered using ExtJs5. It has a tabpanel which consists of an xtype:Container,

 this.tabPanel = Ext.create('Ext.tab.Panel', {
        cls: 'tabPanel',
        width: '100%',
        minHeight: 400,
        activeTab: 0,
        items: [
            {
                title: 'Details',
                items: [
                    this.detailsPanel
                ]
            },
            {
                title: 'History',
                items: [
                    {
                        xtype: 'container',
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        items: [
                            this.collectionHistoryTitle,
                            collectionHistoryChart,
                            this.horizontalLineTop,
                            this.collectionHistoryPanelView,

                            this.horizontalLineBottomMargin,
                            this.collectionHistoryGrid,
                            //this.collectionLogPaging,
                        ]
                    },
                    this.collectionHistoryDoNotChangeMessage
                ]

Here, the this.collectionHistoryPanelView, is as following,

this.collectionHistoryPanelView = Ext.create('Ext.view.View', {
        store: 'collectionHistoryPanelStore',
        tpl: this.collectionHistoryPanelTpl,
        emptyText: 'Please select a row.',
        loadMask: false,
        margin: '0 0 10 0'

    });

What happens is that when I click on a grid row(this.collectionHistoryGrid) the emptyText('Please select a row') gets replaced by an html template(this.collectionHistoryPanelTpl), gets hidden behind the grid and gets displayed correctly after refresh. I have tried a lot of things, but nothing so far has worked.

After Clicking on grid, the Ext view gets hidden:

2.After Clicking on grid, the Ext view gets hidden

Works after refresh:

3.Works after refresh

Your example is lacking certain [required properties](http://stackoverflow.com/help/mcve). — Alexander, Dec 17 '15 at 08:26
Your code gives no possibility to reproduce the problem, since there is no way to see the connection between stores you referenced in the grid and the data view, and how you populate the data view when the a certain record is selected in the grid. — Alexander, Dec 17 '15 at 09:02
Have you tried [`doLayout`](http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.AbstractContainer-method-doLayout) on `collectionHistoryPanelView`? — Alexander, Dec 17 '15 at 09:02
I added a listener to the collectionHistoryPanelView, which calls the panel's doLayout, but still it doesnt work- listeners:{ beforerender:function(){ Ext.getCmp('panel').doLayout(); } } — Sushant Dahiya, Dec 17 '15 at 09:37
The `beforerender` event is fired once at the rendering of the item, not every time a new record is rendered into it. You can try to call doLayout on the panel from the `refresh` event of the view instead. — Alexander, Dec 17 '15 at 09:40
I tried doing that using the refresh event, and placed a breakpoint on the listener, however the event is fired only the first time, during the initial page reload. Its never called again. — Sushant Dahiya, Dec 17 '15 at 10:04
Looks like a rendering problem on vbox layout, including a tpl view. You should either set its height(collectionHistoryPanelView), or wrap the component with another container with `layout:'fit'`. You can also try setting height after clicking grid row. — abeyaz, Dec 17 '15 at 10:12

score 0 · Accepted Answer · answered Dec 17 '15 at 12:48

@ardabeyazoglu 's comment gave the right path to move on. We changed the Ext view to a container and gave the html template as the itemTpl and everything worked fine.

  this.collectionHistoryPanelView = Ext.create('Ext.container.Container', {

        margin: '0 0 10 0',
        items : [
                 {
                    xtype: 'dataview',
                    itemTpl: this.collectionHistoryPanelTpl,
                    store: 'collectionHistoryPanelStore',
                 }
                ],

    });

ExtJs5 -Ext.View.View gets hidden beneath the Ext grid and only reappears after a refresh

1 Answers1