javascript 你能详细解释一下.el、getEl()、Ext.get()吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16166017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you please explain .el, getEl(), Ext.get() in detail?
提问by Sivakumar
I am new to Sencha ExtJs
我是 Sencha ExtJs 的新手
I did not understand the line Ext.getCmp('component_id').getEl().hide();. what is the use of .getEl(). Can i write Ext.getCmp('component_id').hide();directly?
我不明白这一行Ext.getCmp('component_id').getEl().hide();。有什么用.getEl()。可以Ext.getCmp('component_id').hide();直接写吗？
And explain me about .el, Ext.get()also.
并解释我关于 .el 的内容Ext.get()。
回答by Geo
Ext.getCmp() VS Ext.get()
Ext.getCmp() VS Ext.get()
Ext.getCmp()finds an existing (created) componentin ExtJS component tree. Note that it is discouragedto use it. Rely on ComponentQueryinstead.
Ext.getCmp()在 ExtJS 组件树中找到一个现有的（创建的）组件。请注意，不鼓励使用它。而是依靠ComponentQuery。
Ext.get()finds a DOM elementby id. For example:
Ext.get()通过 id查找DOM 元素。例如：
<html>
<body>
<div id="target">Hello, world!</div>
</body>
</html>
Ext.get('target')will return div#targetDOM element.
Ext.get('target')将返回div#targetDOM 元素。
I personally never use either one. Instead, I locate components using ComponentQuery and then retrieve their DOM elements, as described below.
我个人从不使用任何一种。相反，我使用 ComponentQuery 定位组件，然后检索它们的 DOM 元素，如下所述。
MyCmp.getEl() VS MyCmp.el
MyCmp.getEl() VS MyCmp.el
Both just retrieve the top level DOM element of the MyCmp component.
两者都只是检索 MyCmp 组件的顶级 DOM 元素。
Current version of ExtJS (4.2.1) defines the .getEl()function as follows:
当前版本的 ExtJS (4.2.1) 定义了.getEl()如下函数：
MyCmp.getEl = function () {
return this.el;
}
Which means that MyCmp.getEl()and MyCmp.elare absolutely equal.
这意味着MyCmp.getEl()和MyCmp.el是绝对相等的。
Use .elif you prefer to keep your code short and sweet. However, .getEl()might be useful in case if in the future ExtJS adds additional logic to the component's DOM element retrieval process (e.g. checking whether it exists or not first).
使用.el，如果你希望将自己的代码简短而亲切。但是，.getEl()如果将来 ExtJS 向组件的 DOM 元素检索过程添加额外的逻辑（例如，首先检查它是否存在），这可能会很有用。
I prefer .el.
我更喜欢.el。
MyCmp.hide() VS MyCmp.el.hide()
MyCmp.hide() VS MyCmp.el.hide()
MyCmp.hide()and MyCmp.el.hide()are two different functions. Current version of ExtJS (4.2.1) defines them as follows:
MyCmp.hide()并且MyCmp.el.hide()是两个不同的功能。当前版本的 ExtJS (4.2.1) 将它们定义如下：
MyCmp.hide = function (animateTarget, cb, scope) {
var me = this,
continueHide;
if (me.pendingShow) {
delete me.pendingShow;
} if (!(me.rendered && !me.isVisible())) {
continueHide = (me.fireEvent('beforehide', me) !== false);
if (me.hierarchicallyHidden || continueHide) {
me.hidden = true;
me.getHierarchyState().hidden = true;
if (me.rendered) {
me.onHide.apply(me, arguments);
}
}
}
return me;
}
and
和
MyCmp.el.hide = function (animate){
if (typeof animate == 'string'){
this.setVisible(false, animate);
return this;
}
this.setVisible(false, this.anim(animate));
return this;
}
However, both functions seem to produce identical results. They just add a style="display: none;"to the component's DOM element.
然而，这两个函数似乎产生相同的结果。他们只是将 a 添加style="display: none;"到组件的 DOM 元素。
I use MyCmp.hide().
我用MyCmp.hide().
回答by Madhu
1)
Ext.getCmp('')-> ExtJS maintains component list when page is constructed. Using getCmp('unique ID') fetches component from the list2)
getEl()-> returns HTML element / DOM of the component3)
hide()-> just applies css (e.g.:"display:none") to the style of the component
1)
Ext.getCmp('')-> ExtJS 在构建页面时维护组件列表。使用 getCmp('unique ID') 从列表中获取组件2)
getEl()-> 返回组件的 HTML 元素/DOM3)
hide()-> 只是将 css (eg:"display:none") 应用于组件的样式
So
所以
Ext.getCmp('component_id').hide()
Ext.getCmp('component_id').hide()
is equivalent to
相当于
Ext.getCmp('component_id').getEl().hide()
Ext.getCmp('component_id').getEl().hide()
![javascript 为什么我得到 [object HTMLParagraphElement]](/res/img/loading.gif)