Wie zeigt man den Grid Panel Header in der Tableiste an?

Question

Hallo Ich verwende die Extjs 6.0.1 Version für mein Projekt.

Es besteht die Anforderung, das Rasterfeld in der Registerkarte in meinem Projekt anzuzeigen. Ich möchte den Titel für die bestimmte Registerkarte der Registerkarte und anderen Titel für das Rasterfeld zeigen. Unten ist Code, den ich für die gleiche Sache ausprobieren muss.

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

2. Panel-Register:

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 zeigen nur die Registerkarte Titel (Tab Panel-Titel) und girdpanel mit den Spalten bedeutet, dass ich nicht in der Lage, um zu zeigen der "GridPanel" (mit Bild) Titel oder Header-Teil. Ich möchte den Tab-Titel und den Titel des Girdpanels im Tab-Panel anzeigen.

Bitte zeigen Sie mir den Weg, dies zu tun.

Answer 1

Der Titel der Registerkarte muss auf der Registerkarte definiert werden, nicht auf dem Element.

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

Fiddle

Wie pro Ihren Kommentar, müssen Sie verwenden 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