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

Instead of hiding why dont you disable the tab , it will simplify your work ? — Tejas, Apr 11 '17 at 11:57
because I don't want to show that tab to user, On disable tab still show to user — Vikas Hire, Apr 11 '17 at 12:11
I have alternative solution for this.While creating tab you create some config say myTabIndex and assign it some index as per tab hierarchy.Then while setting active tab item use this config index instead of hard-coding tab index.Try this and reply. — Tejas, Apr 11 '17 at 12:24
But by using your 2nd solution code will become very complex. and also I think slow down performance. there is three levels of accessing modules, 1.Supper Admin 2.Admin 3.User. — Vikas Hire, Apr 11 '17 at 12:53
I am wondering why `disable` won't work. I have an idea for this, you take a flag for all admin credentials and use `afterrender` on basis of true and false. — UDID, Apr 11 '17 at 13:10
I tried it like.. Ext.getCmp('Mytab').getTabBar().items.get(4).setDisabled(true); tab just disabled but it still show blurred on tabbar. that I dont want.. — Vikas Hire, Apr 11 '17 at 13:22
@VikasHire : Dude it will not hamper performance, instead you will have clean code,unlike now it seems to be messy & kind of hardcoded.You just try it once and check performance yourself. — Tejas, Apr 11 '17 at 13:41

score 4 · Answer 1 · answered Apr 11 '17 at 17:20

4

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

answered Apr 11 '17 at 17:20

Alexander

19,906
19
75
162

yes it tried Ext.getCmp('companyTabBar').getTabBar().items.get(5).hide(); its workout.. – Vikas Hire Apr 12 '17 at 06:21

score 1 · Accepted Answer · answered Apr 12 '17 at 06:33

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

score 0 · Answer 3 · answered Apr 11 '17 at 17:13

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

How to hide tab panel in ext JS/ Sencha

3 Answers3