如何将html设置为extjs中的元素答案

【问题标题】：How to set html to a element in extjs如何将html设置为extjs中的元素
【发布时间】：2013-01-22 15:10:32
【问题描述】：

1) 如何将HTML 设置为已创建的面板或任何其他元素？

我是初学者。我尝试了以下在 HTML 中设置一些内容

var clickedElement = Ext.getCmp('id').el.child('>');
clickedElement.setHTML("hello");

以上工作正常，但问题是面板内部有许多 div。上述方法是擦除 html 内部的那些（即 div）并将其替换为上述内容。

我通过 Chrome 看到面板有三个嵌套的 div。所以，如果我想向其中添加 HTML，那么我需要提供如下内容：

var clickedElement = Ext.getCmp('id').el.child('>').child('>');  //two times child

当我尝试上述方法时，我成功添加了 html 内容，并且 div 也没有删除。这里的问题是，我看不到添加的内容（可能是因为某些默认样式，我可以看到内容正在添加到 Chrome 控制台中。）

我只是想问是否有任何有效的方法可以将 HTML 添加到面板中。在我看来，这应该是我在这里复杂化的非常简单的方法。

2) 如何检查一个元素是否有特定的孩子？

假设，例如，如果我在创建面板时将extjs Button 作为子项（项目）添加到面板中。（我能做到）。如何检查面板是否有特定元素（即此处的按钮）？

在这里提问之前，我进行了很多搜索，发现link 对我的问题有些相关但没有帮助。

【问题讨论】：

【解决方案1】：

在 ExtJS 中，大多数组件被认为只有一个 body 元素，即使你在 dom 上看到更多。与基本上添加在标记之上的 jQuery 相比，ExtJS 自己生成整个标记。

现在你的问题是，要更新组件的 HTML，你可以简单地调用 update() 这样的方法

Ext.getCmp('id').update('hello');

【讨论】：

感谢这工作。也请在这篇文章中回答我的第二个问题.. :)
@ 为此，您将查找 Component 而不是 dom 中的元素。比如 Ext.getCmp('id').down('button[text=enter]');
ok.. 正如你提到的，我使用了 update()，但这与我在帖子中提到的相同，即var clickedElement = Ext.getCmp('id').el.child('>'); clickedElement.setHTML("hello"); 因此，这太删除了内部div。现在，当我尝试获取 html 时，我的整个代码都被搞砸了。因为某些元素没有嵌套的 div（即内容更改的元素），而其余元素则具有嵌套的 div...
嘿，我通过执行以下操作解决了这个问题，但我认为不建议这样做，并且可能有更有效的方法：Ext.each(Ext.ComponentQuery.query('panel[cls=my-cls]'),function(panel){ panel.update(''); }); //removing extra div from all the child panel elements.
@Mr_Green 看看像 xtemplate 这样的模板。您可以将一个应用于然后填充身体的组件......我认为它们会让您的生活更轻松;）

【解决方案2】：

Ext.ComponentQuery.query('#itemIdOfComponent').update('new value');

不要在组件上设置 id，而是添加 itemId 配置并查看 Ext.ComponentQuery.query 的文档。

【讨论】：