如何从 DOM 元素中获取 Ext JS 组件

Posted 2023-02-26

【中文标题】如何从 DOM 元素中获取 Ext JS 组件

【英文标题】：How to get Ext JS component from DOM element

【发布时间】：2012-08-26 19:53:06

【问题描述】：

尝试创建内联编辑表单。 我有一个看起来像这样的表格：

var editPic = "<img src='https://s3.amazonaws.com/bzimages/pencil.png' alt='edit' height='24' width='24' style='margin-left: 10px;'/>";
var submitPic = "<img id='submitPic' src='https://s3.amazonaws.com/bzimages/submitPic.png' alt='edit' height='24' width='24'/>";

Ext.define('BM.view.test.Edit', 
extend: 'Ext.form.Panel',
alias: 'widget.test-edit',

layout: 'anchor',
title: 'Edit Test',
defaultType: 'displayfield',

items: [
    name: 'id', hidden: true,

    
        name: 'name',
        fieldLabel: 'Name',
        afterSubTpl: editPic,
        cls: 'editable'
    ,
    
        name: 'nameEdit',
        fieldLabel: 'Name',
        xtype: 'textfield',
        hidden: true,
        cls: 'editMode',
        allowBlank: false,
        afterSubTpl: submitPic
    
]
);

控制器看起来像这样（很多事件）：

init: function() 
    this.control(
        'test-edit > displayfield': 
            afterrender: this.showEditable
        ,
        'test-edit': 
            afterrender: this.formRendered
        ,
        'test-edit > field[cls=editMode]': 
            specialkey: this.editField,
            blur: this.outOfFocus
        
    );
,

outOfFocus: function(field, event) 
    console.log('Lost focus');
    this.revertToDisplayField(field);
,

revertToDisplayField: function(field) 
    field.previousNode().show();
    field.hide();
,

formRendered: function(form) 
    Ext.get('submitPic').on('click', function (event, object) 
        var field = Ext.get(object).parent().parent().parent().parent();
        var cmp = Ext.ComponentQuery.query('test-edit > field[cls=editMode]');
    );
,

editField: function(field, e) 
    var value = field.value;
    if (e.getKey() === e.ENTER) 
        if (!field.allowBlank && Ext.isEmpty(value))
            console.log('Not permitted!');
         else 
            var record = Ext.ComponentQuery.query('test-edit')[0].getForm().getRecord();
            Ext.Ajax.request(
                url: '../webapp/tests/update',
                method:'Post',
                params: 
                    id: record.getId(),
                    fieldName: field.name,
                    fieldValue: field.value
                ,
                store: record.store,
                success: function(response, t)
                    field.previousNode().setValue(value);
                    t.store.reload();
                    var text = response.responseText;
                    // process server response here
                    console.log('Update successful!');
                
            );

        
        this.revertToDisplayField(field);

     else if (e.getKey() === e.ESC) 
        console.log('gave up');
        this.revertToDisplayField(field);
    
,

showEditable: function(df) 
    df.getEl().on("click", handleClick, this, df);

    function handleClick(e, t, df)
        e.preventDefault();
        var editable = df.nextNode();
        editable.setValue(df.getValue());
        editable.show();
        editable.focus();
        df.hide();
    
,

我正在使用“afterSubTpl”配置来添加编辑图标和接受图标。 我设置了监听器来监听与它们有关的点击事件，但是在它们被点击后，我只有 Ext.get('submitPic') 创建的元素。现在我想访问 Ext 字段和围绕它的表单。父方法只带回其他 DOM 元素。我如何在它们之间建立联系？您可以在 formRendered 中看到我尝试过的内容。

我希望有人可以为我澄清这一点。

【问题讨论】：

我很确定对于您正在尝试做的事情有更好的解决方案。但无论如何，您是否尝试过为on 方法提供第三个参数，即您的字段或表单？类似Ext.get('submitPic').on('click', function( ... ) ... , form);

它有什么好处？我无法从点击功能中访问它。我错过了什么吗？您建议的更好的解决方案是什么，我很想听听他们的意见？还是 10 倍。

如果表单作为范围参数给出，您将可以使用 'this' 访问它。

无论如何，我是否正确，您只想在文本字段旁边添加一个外部图标并点击图标？

是的。你是对的。我用按钮字段尝试了这个，但看起来不太好。

【参考方案1】：

你可以通过 id 获取组件，但前提是你的组件和它的 dom 元素具有相同的 id（它们通常这样做）：

Ext.getCmp(yourelement.id)

但这并不是一个好的做法——最好设置您的侦听器，以便处理程序方法已经具有对组件的引用。例如，在您的“submitPic”组件中，您可以像这样定义点击监听器：

var me = this;
me.on(
    click: function(arguments)
         var cmp = me;
         ...

);

【讨论】：

这种方法的问题是大多数ExtJS组件不会监听所有事件。因此，监听点击事件，组件未注册将什么也不做。这就是我询问 DOM 元素的原因。

当你在 .on() 方法的配置对象中添加一个元素时，它们会这样做：'el'

【参考方案2】：

遍历 DOM 树，直到找到元素 id 的组件：

 getCmpFromEl = function(el) 
    var body = Ext.getBody();
    var cmp;
    do 
        cmp = Ext.getCmp(el.id);
        el = el.parentNode;
     while (!cmp && el !== body);
    return cmp;

Ext.Component.from(el) 从 ExtJS 6.5.0 开始就是这样做的，正如我刚刚了解到的那样。 Doc Source