Javascript 向displayfield添加单击事件

我希望在extjs应用程序中进行内联编辑： 我创建了一个简单的表单，其中填充了显示字段，旁边有一个小图标，宣布这些字段是可编辑的。我希望它们在单击时成为实际字段

我见过一个类似的问题，但没有答案

这是我的表格：

var editPic = "<img src='https://s3.amazonaws.com/bzimages/pencil.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',

//    handleFieldChanged: function() {
//        console.log('click el');
//    },
//
//    listeners: {
//        add: function(me, component, index) {
////            if( component.isFormField ) {
//                component.on('click', me.handleFieldChanged, me);
////            }
//        }
//    },

    items: [
        {name: 'id', hidden: true},
        {
            name: 'name',
            fieldLabel: 'Name',
            afterSubTpl: editPic,
            cls: 'editable',
            listeners: [
                {
                    element: 'element',
                    delegate: '.editable',
                    event: 'click',
                    fn: function() {
                        console.log('Edit Now!');
                    }
                }
            ]
        },

        {name: 'status', fieldLabel: 'Status'}
        ]
});

据我所知，字段没有侦听单击事件。我怎么做？ 正如你在上面看到的，我尝试了很多方法。afterrender事件非常有效

也许我应该用一个监控点击事件的容器来封装字段

---

任何线索都将不胜感激。

您可以使用

el

属性：

..
beenRendered: function(df) {
        console.log('Rendered!'); // Getting here
        var el = df.el;
        el.on("click",handleClick); 

    function handleClick(e, t){
        e.preventDefault();
        console.log('clicked');
    }

}

---

el是Ext.Element（html dom的包装器）的一个实例，您可以使用它来处理事件。

您可以使用

el

属性：

..
beenRendered: function(df) {
        console.log('Rendered!'); // Getting here
        var el = df.el;
        el.on("click",handleClick); 

    function handleClick(e, t){
        e.preventDefault();
        console.log('clicked');
    }

}

el是Ext.Element（html dom的包装器）的一个实例，您可以使用它来处理事件。

使用

getEl（）

方法定义字段

df.getEl().on('click', function(){});

使用

getEl（）

方法定义字段

df.getEl().on('click', function(){});

---

你真是个天才！我一直在想如何把这些点连接起来，这就成功了。请再问一个问题：既然我有了带“t”的DOM元素，那么我如何才能将它转换到原始的ext字段？相当地如何将df发送到handleClick？它是传递给处理程序的第一个参数。在代码中，这是

df

变量。我理解这一点，但如何将df作为参数发送到handleClick？我计算出来：在“on”方法中，第三个参数是scope，第四个是回调函数的参数el.on（“点击”，手柄点击，此，df）；功能手柄点击（e、t、df）{`你真是个天才！我一直在想如何连接点，这就成功了。10倍。如果你愿意的话，再问一个问题：既然我有了带't'的DOM元素，我该如何将它连接到原始的ext字段？相反，我该如何将df发送到handleClick？它是传递给处理程序的第一个参数。在代码中，这是

df

var可以。我理解，但我如何将df作为参数发送到handleClick？我弄明白了：在“on”方法中，第三个参数是scope，第四个是回调函数的参数。`el.on（“click”，handleClick，this，df）；函数handleClick（e，t，df）{`