1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    22
    Vote Rating
    0
    sophicworks is on a distinguished road

      0  

    Default Unanswered: Tabpanel Items automatically add a header to its dockedItems

    Unanswered: Tabpanel Items automatically add a header to its dockedItems


    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

    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

    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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    From the API:
    Code:
    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.

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    22
    Vote Rating
    0
    sophicworks is on a distinguished road

      0  

    Default


    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

    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

    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..

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    22
    Vote Rating
    0
    sophicworks is on a distinguished road

      0  

    Default


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

    Code:
    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

Thread Participants: 1

Tags for this Thread