Верхняя панель не отображает список в Sencha 2.x

Question

У меня есть элементы списка в tabpanel. Верхняя строка не отображается на странице списка просмотра. Если у кого-нибудь есть решение, пожалуйста, дайте мне знать. Заранее спасибо.

Main.js

Ext.define('myapp.view.Main', { extend: 'Ext.tab.Panel', xtype: 'main', requires: [ 'Ext.TitleBar', 'Ext.Video', 'myapp.view.Browse' ], config: { tabBarPosition: 'bottom', items: [{ xtype: 'browseView', title: 'Blog', iconCls: 'star' } ] } });

Browse.js

Ext.define('myapp.view.Browse', { extend: "Ext.Container", 
xtype: "browseView", 
id: 'browseView', 
requires: ["Ext.dataview.List", "myapp.view.Header"], 
config: { 
    layout: { 
     type: 'fit' //set containers layout 
    }, 
    items: [{ 
     xtype: "headerview" 
    }, { 
     store: "Browse", 
     xtype: 'list', //add xtype 
     onItemDisclosure: false, 
     itemTpl: [ 
      '<img src="{Image_path}" width="80" height="90" style="float:left; margin-right:10px;" /><h4 style="color:blue;">{Name}</h4><p>{Description}</p><div style="clear: both"></div>' 
     ] 
    }] 
} }); 

Header.js

Ext.define('myapp.view.Header', { 
extend: 'Ext.Panel', 
xtype: "headerview", 
config: { 
    height: '60', 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    }, 
    defaults: { 
     flex: '1' 
    }, 
    style: 'text-align:left;width: 100%', 
    items: [{ 
     html: '<div class="header_bg"><img src="img/logo.png" alt="logo"/></div>' 
    }] 
} }); 

Answer 1

Примечание

1) Для 2 предметов вы должны использовать hbox/vbox, подгонка предназначена для одного элемента, и этот сингл принимает полный размер экрана.

2) Дайте высоту для двух элементов в пределах browseView.

Так что ваш код BrowseView

Ext.define('Rest.view.Browse',{ 
extend: "Ext.Container", 
xtype: "browseView", 
id: 'browseView', 
requires: ["Ext.dataview.List", "Rest.view.Header"], 
config: { 
    items: [{ 
     xtype: "headerview", 
     height : '40%' 
    }, { 
     store: "Browse", 
     height : '60%', 
     xtype: 'list', //add xtype 
     onItemDisclosure: false, 
     itemTpl: [ 
      '<img src="{Image_path}" width="80" height="90" style="float:left; margin-right:10px;" /><h4 style="color:blue;">{Name}</h4><p>{Description}</p><div style="clear: both"></div>' 
     ] 
    }] 
} 
});