ExtJs5 -Ext.View.View скрывается под сеткой Ext и появляется только после обновления

Question

У меня есть страница с помощью ExtJs5. Он имеет tabpanel, который состоит из 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 
       ] 

Здесь this.collectionHistoryPanelView, заключается в следующем,

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

    }); 

Что происходит, что, когда я нажимаю на строке сетки (this.collectionHistoryGrid) emptyText ('Please select a row') заменяется шаблоном html (this.collectionHistoryPanelTpl), который скрывается за сеткой и отображается корректно после обновления. Я много пробовал, но пока ничего не получилось.

После нажатия на сетке, вид Ext получает скрытых:

Works после обновления: комментарий

Answer 1

@ardabeyazoglu «ы дал правильный путь двигаться дальше. Мы изменили представление Ext на контейнер и дали html-шаблон как itemTpl, и все сработало нормально.

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

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

    });