Sencha 2.x 中的标题栏不显示列表视图

Question

我在标签面板中有列表项。浏览列表页面中未显示标题栏。如果有人有解决方案，请告诉我。提前致谢。

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' } ] } });

浏览.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，fit 用于单个项目，并且该单个项目占据整个屏幕。

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>'
        ]
    }]
} 
});