向显示字段添加点击事件

Question

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

我看到了类似的问题here，但没有答案。

这是我的表格：

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'}
        ]
});

这是我的控制器内部的控件：

    this.control({
        'test-edit': {
            afterrender: this.beenRendered
        },
        'test-edit > displayfield': {
            click: this.updateTestField
        }
    });


updateTestField: function(button) {
    console.log('field clicked');
},

beenRendered: function() {
        console.log('Rendered!'); // Getting here
        var myDiv = Ext.get(".editable");  // Doesn't find anything
        myDiv.on("click",handleClick); 

    function handleClick(e, t){ // e is not a standard event object, it is a Ext.EventObject
        e.preventDefault();
        console.log('clicked');
    }

},

据我了解，字段没有监听点击事件。我该怎么做？ 正如您在上面看到的，我尝试了很多方法。 afterrender 事件效果很好。

也许我应该以某种方式将字段封装在一个监视点击事件的容器中？

任何线索将不胜感激。

Answer 1

使用getEl() 方法定义字段。

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

Answer 2

您可以使用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 的包装器）w/c 的一个实例，您可以使用它来处理事件。