Question

您好我正在为我的项目使用Extjs 6.0.1版本。

需要在我的项目中将网格面板显示到选项卡面板中。我想为选项卡面板的特定选项卡显示一些标题，为网格面板显示不同的标题。下面是我为同样的事情尝试的代码。

第一个网格面板：

Ext.define('com.SomeName', {

extend: 'Ext.grid.Panel',
xtype: 'GridPanelXtype',
id: 'GridPanel',
controller: 'GridPanelController',
title: 'GridPanel <span style ="margin-left: 620px"><img class="Some class" src> Accept</span>',
flex: 1,
layout: 'fit',

columns: [{
    header : 'column1',
    sortable : true,
    flex:1,
    menuDisabled: true 
},{
    header : 'column2',
    sortable : true,
    flex:1,
    menuDisabled: true
},{
    header: 'column3',
    flex: 1,
    sortable: true,   
    format: 'm/d/y',
    menuDisabled: true
},{
    header: 'column4',
    flex: 1,
    sortable: true,
    menuDisabled: true
}]
});

第二个标签面板：

Ext.define('com.HomeScreen', {
extend: 'Ext.form.Panel',
xtype: 'newHomePage',
controller: 'tabpanelController',
items: [{
        xtype: 'tabpanel',
        id: 'advertiseHomeContainer',
        anchor: '100% 100%',
        border: 2,
        layout: 'column',
        controller: 'tabpanelController',
        items: [{
           id: 'tab1',
            title: 'Tab Panel title',
            xtype : 'GridPanelXtype',
        }],
 }]
});

上面的代码只显示标签标题（标签面板标题）和带有列的girdpanel意味着我无法显示＆＃34; GridPanel＆＃34;（带图像）标题或标题部分。我想在tabpanel中显示标签标题和girdpanel标题。

请告诉我做这件事的方法。

Answer 1

标签面板标题必须在tabpanel上定义，而不是在项目上定义。

    xtype: 'tabpanel',
    id: 'advertiseHomeContainer',
    title: 'Tab Panel title',
    anchor: '100% 100%',
    border: 2,
    layout: 'column',
    controller: 'tabpanelController',
    items: [{
       id: 'tab1',
        xtype : 'GridPanelXtype',
    }],

Fiddle

根据您的评论，您必须使用过度使用：

    xtype: 'tabpanel',
    id: 'advertiseHomeContainer',
    anchor: '100% 100%',
    border: 2,
    layout: 'column',
    controller: 'tabpanelController',
    items: [{
        xtype:'panel',
        title: 'Tab title',
        items:[{
            id: 'tab1',
            xtype : 'GridPanelXtype',
        }]
    }],

Fiddle

如何在tabpanel中显示网格面板标题？

1 个答案: