Tabpanel Items automatically add a header to its dockedItems

[sophicworks]

Hi, I'am new to EXTJS and I'am trying to find a way how to make my Tabpanel items not to create the header
automatically

Tabpanel items automatically creates header.png

the header was added to the dockedItems, and yes I don't want may tab to create that header since it's redundant for me to display the name of the tab

 function tabCreationManager(girdToCreate,data){
      
      workspaceTabPanel = Ext.getCmp('workspaceTabpanel');
      //SelectedTab if not found is undefined and consider as false
      var SelectedTab = workspaceTabPanel.getChildByElement('Tab_'+data.id); 
      
      //Select the tab if it exist else create the tab and its contents
      if(SelectedTab)
      {
        workspaceTabPanel.setActiveTab(SelectedTab);
      }
      else 
      {
        windowArray = new Array(); 
        GridList = Ext.widget(girdToCreate); //creates a gridpanel
        

        var newTab = Ext.create('PA.view.TabItem',{
        title: data.name+' Tab',
        windowOpen: windowArray, //custom config
        id:'Tab_'+data.id,
        items: [GridList]});
          
        var addedTab = workspaceTabPanel.add(newTab);
        
        workspaceTabPanel.setActiveTab(addedTab);
        if(workspaceTabPanel.hidden)
        {
          workspaceTabPanel.show();
        }
      }
}

Here is the PA.view.TabItem code

Ext.define('PA.view.TabItem', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.tabitem',
    
    closable: true,
    layout: 'fit',
    header: false,


    listeners: {
      beforeclose: function(component,a){
        if(component.windowOpen.length){
          Ext.Msg.alert('Error Code: 0042',component.title.toUpperCase() +' is still busy at the moment, to                      
         close this tab please make '+ 'sure to close all the existing processes inside 
         +'component.title.toUpperCase() +'. Thank you!');
          return false;
        }
      }
    }
});

I already set the header to false but the panel header is still showing..
I hope you can help me find a way to fix this or at least remove the header, Thanks in Advance

[scottmartin]

Where is your code that is adding the header as shown:

From the API:

var tabs = Ext.create('Ext.tab.Panel', {
    items: [
        {
            title: 'Tab 1',
            html : 'A simple tab'
        }
    ],
    renderTo : Ext.getBody()
});

Ext.create('Ext.button.Button', {
    text    : 'New tab',
    scope   : this,
    handler : function() {
        var tab = tabs.add({
            title: 'Tab ' + (tabs.items.length + 1),
            html : 'Another one'
        });

        tabs.setActiveTab(tab);
    },
    renderTo : Ext.getBody()
});​

Scott.

[sophicworks]

thanks for the reply scott!

I realized that the cause of my problem was the panel header is also created when trying to add Ext.panel.Panel inside the the tab.

Sorry for giving incomplete information I was about to edit my post, here is the details of my code

 function tabCreationManager(girdToCreate,data){
      
      workspaceTabPanel = Ext.getCmp('workspaceTabpanel');
      //SelectedTab if not found is undefined and consider as false
      var SelectedTab = workspaceTabPanel.getChildByElement('Tab_'+data.id); 
      
      //Select the tab if it exist else create the tab and its contents
      if(SelectedTab)
      {
        workspaceTabPanel.setActiveTab(SelectedTab);
      }
      else 
      {
        windowArray = new Array(); 
        GridList = Ext.widget(girdToCreate); //creates a gridpanel
        

        var newTab = Ext.create('PA.view.TabItem',{
        title: data.name+' Tab',
        windowOpen: windowArray, //custom config
        id:'Tab_'+data.id,
        items: [GridList]});
          
        var addedTab = workspaceTabPanel.add(newTab);
        
        workspaceTabPanel.setActiveTab(addedTab);
        if(workspaceTabPanel.hidden)
        {
          workspaceTabPanel.show();
        }
      }
}

Here is the PA.view.TabItem code

Ext.define('PA.view.TabItem', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.tabitem',
    
    closable: true,
    layout: 'fit',
    header: false,


    listeners: {
      beforeclose: function(component,a){
        if(component.windowOpen.length){
          Ext.Msg.alert('Error Code: 0042',component.title.toUpperCase() +' is still busy at the moment, to                      
         close this tab please make '+ 'sure to close all the existing processes inside 
         +'component.title.toUpperCase() +'. Thank you!');
          return false;
        }
      }
    }
});

I already set the header to false but the panel header is still showing..

[sophicworks]

OK! I fix my problem, I change what my PA.view.TabItem extends which is from Ext.panel.Panel to Ext.container.Container.

Ext.define('PA.view.TabItem', {
    extend: 'Ext.container.Container', // from Ext.panel.Panel
    alias : 'widget.tabitem',
    
    closable: true,
    layout: 'fit',
    header: false,


    listeners: {
      beforeclose: function(component,a){
            if(component.windowOpen.length){
                 Ext.Msg.alert('Error Code: 0042',component.title.toUpperCase() +' is still busy at the moment, to'  
                 +close this tab please make sure to close all the existing processes inside '+
                 component.title.toUpperCase() +'. Thank you!');
                   return false
           }
       }
    }
});

Thanks for the reply and concern scott. I appreciate what you did