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

3
votes

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

1
javascriptextjsextjs4extjs4.2extjs5
Your example is lacking certain required properties. – Alexander
Can you please elaborate a bit? I am new to stack overflow. – Sushant Dahiya
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
Have you tried doLayout on collectionHistoryPanelView? – Alexander
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

1 Answers

0
votes

@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',
                 }
                ],

    });