如何使用 ExtJS 显示/隐藏/切换元素？

Posted 2023-02-26

【中文标题】如何使用 ExtJS 显示/隐藏/切换元素？

【英文标题】：How to Show/Hide/Toggle Element with ExtJS?

【发布时间】：2010-11-02 03:11:33

【问题描述】：

【参考方案1】：

非常简单，在元素级别（进一步到下面的 cmets）：

Ext.get("my-div");

my-div 是相关元素的 ID。

见here和here

在组件级别：

Ext.getCmp('idofthecomponent').getEl().show();
Ext.getCmp('idofthecomponent').getEl().hide();
Ext.getCmp('idofthecomponent').getEl().toggle();

分别参见here (show)、here (hide) 和here (toggle)。所以“idofthecomponent”就是分配给 Panel 对象的 id。

你也可以直接使用其他选择器来引用元素，比如document.getElementbyId，例如。

 document.getElementById('elementtoshow').show();

【讨论】：

仅供参考，应该使用 get() 来支持已弃用的 getEl()。请注意，getEl() 未在文档中列出。

这是不正确的 - getEl 在文档中列出，转到 dev.sencha.com/deploy/dev/docs 并输入“getEl”。不推荐在组件级别使用它，在这种情况下，'get' 返回一个底层组件，而不是此处所需的包装元素 (dev.sencha.com/deploy/dev/docs/source/…) 与 (dev.sencha.com/deploy/dev/docs/source/…)。

因此，在这种情况下，Brian 对 get/getEl 的看法是正确的。您的文档引用指向与 Ext JS 中的元素不同的容器和组件。

有效 - 如前所述修改问题

谢谢，在我开始接触 ExtJs 的过程中，我从你的网站学到了很多 :)

【参考方案2】：

Ext.AbstractComponent 有一个隐藏属性，您可以在初始化时将其设置为 true，然后根据需要以编程方式更改

items: [
     xtype: 'button',
     itemId: 'submitButton',
     text: 'Submit',
     hidden: true
]

然后……

me.getComponent('submitButton').hidden = false;