我有一个像这样带有选项卡面板的视口(viewport)定义
Ext.define('rgpd.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
requires: [
'rgpd.view.entity1.View',
'rgpd.view.entity2.View',
'rgpd.view.entity3.View',
'rgpd.view.entity4.View',
'rgpd.view.entity5.View',
],
items: [{
xtype: 'tabpanel',
id: 'Rgpd',
region: 'center',
tabPosition: 'left',
titleRotation: 0,
tabRotation: 0,
padding: 0,
margin: 0,
split: true,
header: {
layout: {
align: 'stretchmax'
},
title: {
text: 'RGPD',
flex: 0
},
glyph: 124,
items: []
},
config:{
collapsible: true,
hideCollapseTool: false,
split:false
},
items: [
{
xtype: 'entity1',
textAlign: 'right',
flex: 1,
hidden: true,
},
{
xtype: 'entity2',
textAlign: 'right',
flex: 1,
hidden: true,
},
{
xtype: 'entity3',
textAlign: 'right',
flex: 1,
hidden: true,
},
{
xtype: 'entity4',
textAlign: 'right',
flex: 1,
hidden: true,
},
{
xtype: 'entity5',
textAlign: 'right',
flex: 1,
hidden: true,
},
]
}]
});
if (condition) {
// set entity2 hidden: false
}
如您所见,我的元素已隐藏。我制作了一个身份验证系统,我希望能够将隐藏重置为特定项目(例如实体2)并将隐藏设置为 false。这可能吗?如何实现?我想在我的视口(viewport)定义之后执行此操作
listeners: {
boxready: function(){
if(condition){
this.down("entity1").setVisible(true);
this.down("entity2").setVisible(true);
}
}
}
添加这段代码会产生 this 。我没有左侧菜单,并且只有一个实体
最佳答案
使用setVisible更改组件可见性的函数
将其添加到tabPanel
listeners: {
boxready: function(){
if(condition){
this.down("entity1").setVisible(true);
this.down("entity2").setVisible(true);
}
}
}
关于javascript - 如何动态更改 ExtJS 中的组件可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50487013/