如何动态更改 ExtJS 中的组件可见性
How to dynamically change component visibility in ExtJS
我有一个像这样用选项卡面板定义的视口
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
}
如您所见,我的物品已隐藏。我制作了一个身份验证系统,我希望能够将隐藏重置为特定项目(例如 entity2)并将隐藏设置为 false。这可能吗?怎么办?我想在我的视口定义之后做这件事
here is an example of what i want. Dynamically setting 2 entities at visible if the condition is ok and have this menu on left side
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);
}
}
}
好的,这就是我的做法
this.getTabBar().getComponent(item_index).hide();
item_index 可以这样找到:你有 this.items.indexMap
这是一个数组,其中键是项目 xtypes,值是项目数组中的索引。
将所有项目设置为默认可见,创建一个项目数组以隐藏
to hide = ["entity2", "entity3"];
在数组上循环并创建索引数组
const arrayLength = to_hide.length;
arr = [];
for (let i = 0; i < arrayLength; i++) {
arr.push(this.items.indexMap[to_hide[i]]);
}
然后在索引数组上循环并隐藏每个索引
for (let i = 0; i < arr.length; i++) {
this.getTabBar().getComponent(arr[i]).hide();
}
getTabBar 特定于 tabpanel
我有一个像这样用选项卡面板定义的视口
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
}
如您所见,我的物品已隐藏。我制作了一个身份验证系统,我希望能够将隐藏重置为特定项目(例如 entity2)并将隐藏设置为 false。这可能吗?怎么办?我想在我的视口定义之后做这件事
here is an example of what i want. Dynamically setting 2 entities at visible if the condition is ok and have this menu on left side
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);
}
}
}
好的,这就是我的做法
this.getTabBar().getComponent(item_index).hide();
item_index 可以这样找到:你有 this.items.indexMap
这是一个数组,其中键是项目 xtypes,值是项目数组中的索引。
将所有项目设置为默认可见,创建一个项目数组以隐藏
to hide = ["entity2", "entity3"];
在数组上循环并创建索引数组
const arrayLength = to_hide.length;
arr = [];
for (let i = 0; i < arrayLength; i++) {
arr.push(this.items.indexMap[to_hide[i]]);
}
然后在索引数组上循环并隐藏每个索引
for (let i = 0; i < arr.length; i++) {
this.getTabBar().getComponent(arr[i]).hide();
}
getTabBar 特定于 tabpanel