how to show the grid panel header in tabpanel?

Question

Hi I am using the Extjs 6.0.1 version for my project.

There is a requirement to show the grid panel into the tab panel in my project. I want to show the some title for the particular tab of tab panel and different title for grid panel. below is code I have try out for the same thing.

1st Grid panel:

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

2nd tab panel:

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

Above code only show the tab title(Tab Panel title) and girdpanel with the columns means I can not able to show the "GridPanel"(with image) title or header part. I want to show the tab title and the girdpanel title inside the tabpanel.

Please show me the way to do this thing.

Alexander Alexander · Accepted Answer · 2016-05-02T07:22:32

The tab panel title must be defined on tabpanel, not on the item.

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

Fiddle

As per your comment, you have to use 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',
        }]
    }],

Fiddle

how to show the grid panel header in tabpanel?

1 Answers