将单击事件添加到显示字段

Adding a click event to displayfield

本文关键字：显示 字段 添加 单击 事件      更新时间：2023-09-26

我希望在我的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'}
        ]
});

这是我的控制器中的控件：

    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事件效果很好。

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

任何线索都将不胜感激。

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

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

您可以使用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的一个实例，您可以使用它来处理事件。

相关文章：