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的一个实例，然后你可以用来处理事件。

将click事件添加到displayfield

2 个答案: