как показать заголовок панели сетки в tabpanel?

Привет я использую версию Extjs 6.0.1 для моего проекта.

Существует требование, чтобы показать панель сетки на панели вкладки в моем проекте.
Я хочу показать некоторый заголовок для конкретной вкладки панели вкладок и другой заголовок для панели сетки. ниже приведен код, который я попробовал для того же самого.

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

2-я панель вкладки:

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 со столбцами означает, что я не могу в состоянии показать «GridPanel»(с изображением) название или часть заголовка. Я хочу показать название вкладки и название girdpanel внутри tabpanel.

Пожалуйста, покажите мне, как это сделать.

1 ответ

  1. Название панели вкладок должно быть определено на tabpanel, а не на элементе.

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

    Играть на скрипке

    Согласно вашему комментарию, вы должны использовать overnesting:

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

    Играть на скрипке