你能详细解释一下.el、getEl()、Ext.get()吗? [英] Can you please explain .el, getEl(), Ext.get() in detail?
问题描述
我是 Sencha ExtJs 的新手
I am new to Sencha ExtJs
我不明白 Ext.getCmp('component_id').getEl().hide(); 这一行..getEl() 有什么用.我可以直接写Ext.getCmp('component_id').hide();吗?
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?
还要解释一下.el，Ext.get().
And explain me about .el, Ext.get() also.
推荐答案
Ext.getCmp() VS Ext.get()
Ext.getCmp() 在 ExtJS 组件树中查找现有(创建的)组件.请注意，不鼓励使用它.改用 ComponentQuery.
Ext.getCmp() VS Ext.get()
Ext.getCmp() finds an existing (created) component in ExtJS component tree. Note that it is discouraged to use it. Rely on ComponentQuery instead.
Ext.get() 通过 id 查找 DOM 元素.例如:
Ext.get() finds a DOM element by id. For example:
<html>
<body>
<div id="target">Hello, world!</div>
</body>
</html>
Ext.get('target') 将返回 div#target DOM 元素.
Ext.get('target') will return div#target DOM element.
我个人从不使用任何一种.相反，我使用 ComponentQuery 定位组件，然后检索它们的 DOM 元素，如下所述.
I personally never use either one. Instead, I locate components using ComponentQuery and then retrieve their DOM elements, as described below.
两者都只是检索 MyCmp 组件的顶级 DOM 元素.
Both just retrieve the top level DOM element of the MyCmp component.
当前版本的 ExtJS (4.2.1) 定义了 .getEl() 函数如下:
Current version of ExtJS (4.2.1) defines the .getEl() function as follows:
MyCmp.getEl = function () {
return this.el;
}
这意味着 MyCmp.getEl() 和 MyCmp.el 绝对相等.
使用 .el 如果你更喜欢保持你的代码短小精悍.但是，如果将来 ExtJS 向组件的 DOM 元素检索过程添加额外的逻辑(例如，首先检查它是否存在)，.getEl() 可能会很有用.
Use .el if 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.
MyCmp.hide() 和 MyCmp.el.hide() 是两个不同的函数.当前版本的 ExtJS (4.2.1) 将它们定义如下:
MyCmp.hide() and MyCmp.el.hide() are two different functions. Current version of ExtJS (4.2.1) defines them as follows:
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;
}
和
MyCmp.el.hide = function (animate){
if (typeof animate == 'string'){
this.setVisible(false, animate);
return this;
}
this.setVisible(false, this.anim(animate));
return this;
}
然而，这两个函数似乎产生相同的结果.他们只是在组件的 DOM 元素中添加了一个 style="display: none;".
However, both functions seem to produce identical results. They just add a style="display: none;" to the component's DOM element.
我使用 MyCmp.hide().
这篇关于你能详细解释一下.el、getEl()、Ext.get()吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
