How to hide tab panel in ext JS/ Sencha

Question

there is I am getting problem during hiding tab panel in my application. Ok. I try to what is I am doing in my application.. please see below image

you can see there is multiple tabs. I want to hide it if user not have access provide by admin. I simply used array to push tab's panel in array, like this.

 companyManageitems.push(this.Company);
 companyManageitems.push(this.User);
 companyManageitems.push(this.ChangePassword);
 companyManageitems.push(this.Group); //etc

and this array I passed to another tab panel's Items config, Like this.

     this.companyManagePanel = new Ext.tab.Panel({
            cls: 'p-tab-panel',
            activeTab: 0,
            items:companyManageitems
           });

to manage tab access functionality I made a function that return component that I passed to that function if user have access to that component for eg. Change password. Function is like

userAccess(this.ChangePassword, 'Change Password');

this return if user not have permission to change password. and simply change password tab not get pushed in companyManageitems array, like this

 companyManageitems.push(userAccess(this.ChangePassword, 'Change Password'));

'Change Password' is a permission name. 2nd parameter of userAccess()

Problem is that: When function return null when user not have access to that component/tab tab index get changed of other successive tabs. so linking of tab not work out. means this code I written in another view/panel/ not working/ open another tabs that get index no.3

this.manageCompany.companyManagePanel.getLayout().setActiveItem(3);

Answer 1

I am modified code as bellow,

var companyManageitems = [];
        companyManageitems.push(this.companytab);
        companyManageitems.push(this.Usertab);
        companyManageitems.push(this.roletab); 

instead of:

companyManageitems.push(userAccess(this.this.companytab, 'Company'));
companyManageitems.push(userAccess(this.Usertab, 'Users'));
companyManageitems.push(userAccess(tthis.roletab, 'role'));

means, Simply I pushed all tabPanels in Array companyManageitems[] And hided tabs by index like this,

 if (userAccess(this.ChangepasswordPanel, 'Change Password') == null) {
            Ext.getCmp('companyTabBar').getTabBar().items.get(3).hide();
        }

Its Working....thank you

Answer 2

So, what you do is the following:

this.manageCompany.companyManagePanel.getLayout().setActiveItem(3);

SetActiveItem does indeed allow you to use the index, but it does also allow you to use a specific item or the itemId.

So, what you want to do is maybe the following:

if(this.manageCompany.companyManagePanel.items.indexOf(this.ChangePassword)>-1 && hasUserAccess('Change Password'))
   this.manageCompany.companyManagePanel.getLayout().setActiveItem(this.ChangePassword);

Answer 3

If you want to hide a tab item available at this.Company and the corresponding tabbar entry, do as follows:

this.Company.hide();
this.Company.tab.hide();