TECHTOGOU

javascript - 能详细解释下.el, getEl(), Ext.get() 吗?

coder 2024-05-16 原文

我是 Sencha ExtJs 的新手

我不明白 Ext.getCmp('component_id').getEl().hide(); 行。 .getEl()有什么用。我可以直接写 Ext.getCmp('component_id').hide(); 吗?

同时向我解释一下 .el,Ext.get()

最佳答案

Ext.getCmp() VS Ext.get()

Ext.getCmp() 在 ExtJS 组件树中找到一个现有的(创建的)组件。请注意,不鼓励使用它。靠ComponentQuery相反。

Ext.get() 通过 id 找到一个 DOM 元素。例如:

<html>
    <body>
        <div id="target">Hello, world!</div>
    </body>
</html>

Ext.get('target') 将返回 div#target DOM 元素。

我个人从不使用任何一个。相反,我使用 ComponentQuery 定位组件,然后检索它们的 DOM 元素,如下所述。


MyCmp.getEl() VS MyCmp.el

两者都只是检索 MyCmp 组件的顶级 DOM 元素。

当前版本的 ExtJS (4.2.1) 定义了 .getEl() 函数如下:

MyCmp.getEl = function () {
    return this.el;
}

这意味着 MyCmp.getEl()MyCmp.el 绝对相等

如果您希望让您的代码简洁明了,请使用 .el。但是,如果将来 ExtJS 向组件的 DOM 元素检索过程添加额外的逻辑(例如,首先检查它是否存在),.getEl() 可能会有用。

我更喜欢 .el


MyCmp.hide() VS MyCmp.el.hide()

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;
}

MyCmp.el.hide = function (animate){
    if (typeof animate == 'string'){
        this.setVisible(false, animate);
        return this;
    }
    this.setVisible(false, this.anim(animate));
    return this;
}

但是,这两个函数似乎产生了相同的结果。他们只是将 style="display: none;" 添加到组件的 DOM 元素。

我使用 MyCmp.hide()

关于javascript - 能详细解释下.el, getEl(), Ext.get() 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16166017/

有关javascript - 能详细解释下.el, getEl(), Ext.get() 吗?的更多相关文章

  1. javascript - 在 Angular 中动态创建元素 - 2

    我的javascript经验很少。我需要在单击某个项目时添加一个菜单。我们被要求从头开始构建它,而不使用任何库,如bootstrap组件或JQuery。我们正在使用Angularjs。在Angular上,我想知道创建新元素的正确方法。类似于我们没有的document.createElement。我正在添加一些代码,以便你们更好地了解我想要做什么。菜单指令.directive('menu',["$location","menuData",functionfactory(location,menuData){return{templateUr

  2. Javascript - 使用字符串连接设置变量 - 2

    这个问题在这里已经有了答案:UsedynamicvariablenamesinJavaScript(19个回答)关闭9年前。是否可以通过将两个字符串连接在一起形成名称来设置变量?如果可能的话,我想根据用户单击的对象的类名来确定要设置的变量。我知道我可以对一堆if/elseif语句进行硬编码,但如果我可以间接引用变量,那就太棒了。我在想这样的事情:varowner_read;vargroup_read;functionsetVariableIndirectly(object){varsecond=object.className;//returns"read"varfir

  3. javascript - 如何将 jquery 事件重新绑定(bind)到通过 ajax 加载的内容,而无需为每个事件/类执行此操作 - 2

    所以我在其中绑定(bind)了这个jquery-App:我所有“.btn-delete”元素的“删除功能”我所有“.btn-add”元素的“添加功能”等等。在我的webapp的一个div中,我异步加载内容,包括我想将“删除”和“添加”功能绑定(bind)到的元素。这些元素也有一个“btn-delete”或“btn-add”类-但由于内容是异步加载的,因此事件不会绑定(bind)到它们而不做任何事情。所以我听说使用可以在异步加载内容后立即触发的.on('click'...)函数,我可以重新绑定(bind)这些函数。但是我必须为我想使用的每个功能都这样做。我不想要。我想要的是有一个通用函数

  4. javascript - 添加文件 ://. 权限到 chrome 扩展 - 2

    如何使用chrome扩展程序启用file:///的权限。在我的manifest.json中,我尝试过:"permissions":["file:///*"]和"permissions":["file://*"]还有"permissions":["*:///C"]这些都不起作用。 最佳答案 "permissions":["file://*/*"]除非从您的本地磁盘加载扩展,否则默认情况下将禁用文件访问。用户必

  5. javascript - 根据屏幕尺寸执行功能 - 2

    我需要根据屏幕尺寸和屏幕尺寸变化执行特定功能(响应式)假设我有3个函数(例如)functionred(){$('div').css('background','#B60C0C').text('ScreenSizeRED');console.log('RED');}functionorange(){$('div').css('background','#EBAE10').text('ScreenSizeORANGE');console.log(&

  6. 多个元素上的 JavaScript onChange() - 2

    是否可以将相同的onChange()分配给多个元素(无jQuery)目前我在做varnamefirst=document.getElementsByName("attribute.IdentifierSource")[0];namefirst.onchange=function(){//disablesomestuff}但是,我必须对另外5个元素执行此onChange(),所以我想知道是否可以同时对所有元素执行此操作?或者我是否必须为每个元素执行此操作。(我对Javascript很陌生) 最佳答案 如果你想一次绑定(

  7. javascript - 在 AngularJS 中加载时隐藏模板 - 2

    从服务器加载数据时隐藏模板的更好解决方案是什么?我的解决方案是使用$scope使用bool变量isLoading并使用指令ng-hide,例如:<divng-hide='isLoading'></div>angular还有别的办法吗? 最佳答案 您可以尝试使用ngCloak指令。检查此链接http://docs.angularjs.org/api/ng.directive:ngCloak 关于javascript-在AngularJS中加载时隐藏模

  8. javascript - 通过 Web API 或 libspotify 获取 Spotify 播放历史 - 2

    有没有办法使用他们的js或CAPI获取我的Spotify播放历史记录?我看到了几个例子,但那是使用他们过时的API版本。 最佳答案 无法通过任何API获得Spotify播放历史记录。免责声明:我是Spotify的员工。 关于javascript-通过WebAPI或libspotify获取Spotify播放历史,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/18838743/

  9. javascript - 如何使用 JQuery 或 Javascript 添加只读属性(但遵循 W3C 标准!) - 2

    以下代码添加和删除属性readonly作品(来自here):$('#someid').prop('readonly',true);$('#someid').removeProp('readonly');但是W3C标准建议使用没有值的只读属性(来自here):我们应该使用:<inputtype="text"readonly/>改为:<inputtype="text"readonly="trueorreadonlyoranything"/>作为$('

  10. javascript - 使用低破折号/下划线从 _.pluck 获取对象 - 2

    我有一个结构如下的对象:varmy_object={first_item:{important_number:4},second_item:{important_number:6},}但是,我想要一个结构如下的对象:{first_item:4,second_item:6,}我本来希望能够用_.pluck得到这个结果:_.pluck(my_object,"important_number")但这给了我:[0:4,1:6]很好,但我需要对象的实际名称。我摆弄了一下,最后得到了这个:_.reduce(my_object,function(memo,val,key){memo[

随机推荐

  1. javascript - 在 Angular 中动态创建元素 - 2

    我的javascript经验很少。我需要在单击某个项目时添加一个菜单。我们被要求从头开始构建它,而不使用任何库,如bootstrap组件或JQuery。我们正在使用Angularjs。在Angular上,我想知道创建新元素的正确方法。类似于我们没有的document.createElement。我正在添加一些代码,以便你们更好地了解我想要做什么。菜单指令.directive('menu',["$location","menuData",functionfactory(location,menuData){return{templateUr

  2. Javascript - 使用字符串连接设置变量 - 2

    这个问题在这里已经有了答案:UsedynamicvariablenamesinJavaScript(19个回答)关闭9年前。是否可以通过将两个字符串连接在一起形成名称来设置变量?如果可能的话,我想根据用户单击的对象的类名来确定要设置的变量。我知道我可以对一堆if/elseif语句进行硬编码,但如果我可以间接引用变量,那就太棒了。我在想这样的事情:varowner_read;vargroup_read;functionsetVariableIndirectly(object){varsecond=object.className;//returns"read"varfir

  3. javascript - 如何将 jquery 事件重新绑定(bind)到通过 ajax 加载的内容,而无需为每个事件/类执行此操作 - 2

    所以我在其中绑定(bind)了这个jquery-App:我所有“.btn-delete”元素的“删除功能”我所有“.btn-add”元素的“添加功能”等等。在我的webapp的一个div中,我异步加载内容,包括我想将“删除”和“添加”功能绑定(bind)到的元素。这些元素也有一个“btn-delete”或“btn-add”类-但由于内容是异步加载的,因此事件不会绑定(bind)到它们而不做任何事情。所以我听说使用可以在异步加载内容后立即触发的.on('click'...)函数,我可以重新绑定(bind)这些函数。但是我必须为我想使用的每个功能都这样做。我不想要。我想要的是有一个通用函数

  4. javascript - 添加文件 ://. 权限到 chrome 扩展 - 2

    如何使用chrome扩展程序启用file:///的权限。在我的manifest.json中,我尝试过:"permissions":["file:///*"]和"permissions":["file://*"]还有"permissions":["*:///C"]这些都不起作用。 最佳答案 "permissions":["file://*/*"]除非从您的本地磁盘加载扩展,否则默认情况下将禁用文件访问。用户必

  5. javascript - 根据屏幕尺寸执行功能 - 2

    我需要根据屏幕尺寸和屏幕尺寸变化执行特定功能(响应式)假设我有3个函数(例如)functionred(){$('div').css('background','#B60C0C').text('ScreenSizeRED');console.log('RED');}functionorange(){$('div').css('background','#EBAE10').text('ScreenSizeORANGE');console.log(&

  6. 多个元素上的 JavaScript onChange() - 2

    是否可以将相同的onChange()分配给多个元素(无jQuery)目前我在做varnamefirst=document.getElementsByName("attribute.IdentifierSource")[0];namefirst.onchange=function(){//disablesomestuff}但是,我必须对另外5个元素执行此onChange(),所以我想知道是否可以同时对所有元素执行此操作?或者我是否必须为每个元素执行此操作。(我对Javascript很陌生) 最佳答案 如果你想一次绑定(

  7. javascript - 在 AngularJS 中加载时隐藏模板 - 2

    从服务器加载数据时隐藏模板的更好解决方案是什么?我的解决方案是使用$scope使用bool变量isLoading并使用指令ng-hide,例如:<divng-hide='isLoading'></div>angular还有别的办法吗? 最佳答案 您可以尝试使用ngCloak指令。检查此链接http://docs.angularjs.org/api/ng.directive:ngCloak 关于javascript-在AngularJS中加载时隐藏模

  8. javascript - 通过 Web API 或 libspotify 获取 Spotify 播放历史 - 2

    有没有办法使用他们的js或CAPI获取我的Spotify播放历史记录?我看到了几个例子,但那是使用他们过时的API版本。 最佳答案 无法通过任何API获得Spotify播放历史记录。免责声明:我是Spotify的员工。 关于javascript-通过WebAPI或libspotify获取Spotify播放历史,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/18838743/

  9. javascript - 如何使用 JQuery 或 Javascript 添加只读属性(但遵循 W3C 标准!) - 2

    以下代码添加和删除属性readonly作品(来自here):$('#someid').prop('readonly',true);$('#someid').removeProp('readonly');但是W3C标准建议使用没有值的只读属性(来自here):我们应该使用:<inputtype="text"readonly/>改为:<inputtype="text"readonly="trueorreadonlyoranything"/>作为$('

  10. javascript - 使用低破折号/下划线从 _.pluck 获取对象 - 2

    我有一个结构如下的对象:varmy_object={first_item:{important_number:4},second_item:{important_number:6},}但是,我想要一个结构如下的对象:{first_item:4,second_item:6,}我本来希望能够用_.pluck得到这个结果:_.pluck(my_object,"important_number")但这给了我:[0:4,1:6]很好,但我需要对象的实际名称。我摆弄了一下,最后得到了这个:_.reduce(my_object,function(memo,val,key){memo[