Search code examples
javascriptextjssencha-touchsencha-architectsencha-touch-2.1

How to hide tab panel in ext JS/ Sencha

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

enter image description here

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);
Solution

  • 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