如何在 ext JS/Sencha 中隐藏选项卡面板

Posted 2023-02-26

【中文标题】如何在 ext JS/Sencha 中隐藏选项卡面板

【英文标题】：How to hide tab panel in ext JS/ Sencha

【发布时间】：2017-04-11 11:12:29

【问题描述】：

在我的应用程序中隐藏选项卡面板时出现问题。 行。我尝试在我的应用程序中做什么.. 请看下图

您可以看到有多个选项卡。 如果用户没有管理员提供的访问权限，我想隐藏它。 我只是简单地使用数组将标签的面板推送到数组中，就像这样。

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

我将这个数组传递给另一个选项卡面板的项目配置，就像这样。

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

为了管理选项卡访问功能，我创建了一个函数，如果用户有权访问该组件，则返回我传递给该函数的组件，例如。更改密码。函数就像

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

如果用户无权更改密码则返回。并简单地更改密码选项卡不会被推送到 companyManageitems 数组中，就像这样

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

“更改密码”是一个权限名称。 userAccess()的第二个参数

问题是： 当用户无权访问该组件/选项卡选项卡索引时，函数返回 null 会更改其他连续选项卡。所以选项卡的链接不起作用。 方法 我在另一个视图/面板中编写的这段代码/不工作/打开另一个获得索引号 3 的选项卡

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

【问题讨论】：

与其隐藏你为什么不禁用标签，它会简化你的工作？

因为我不想向用户显示该选项卡，在禁用选项卡时仍向用户显示

我对此有替代解决方案。在创建选项卡时，您创建一些配置说 myTabIndex 并根据选项卡层次结构为其分配一些索引。然后在设置活动选项卡项时使用此配置索引而不是硬编码选项卡索引。试试这个并回复。

但是通过使用您的第二个解决方案代码将变得非常复杂。而且我认为会降低性能。访问模块分为三个级别，1.Supper Admin 2.Admin 3.User.

我想知道为什么disable 不起作用。我对此有一个想法，您为所有管理员凭据设置一个标志，并根据真假使用afterrender。

【参考方案1】：

如果您想隐藏this.Company 上可用的选项卡项和相应的选项卡条目，请执行以下操作：

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

【讨论】：

是的，它尝试过 Ext.getCmp('companyTabBar').getTabBar().items.get(5).hide();它的锻炼..

【参考方案2】：

我修改代码如下，

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

代替：

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

意思是，我把所有的tabPanels都推入了数组companyManageitems[] 并像这样按索引隐藏标签，

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

它的工作......谢谢你

【参考方案3】：

所以，你要做的是：

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

SetActiveItem 确实允许您使用索引，但它也允许您使用特定项目或 itemId。

所以，你想要做的可能是：

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