Question

I would like to have inline editiing in my extjs application:
I’ve created a simple form that is filled with displayfields with a little icon next to them announcing that they are editable. I want them to become the actual fields on click.

I’ve seen a similar question here, but no answer.

This is my form:

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 is the control inside my controller:

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

},

As far as I understand it, fields are not listening to click events. How do I make them?
As you can see above, i’ve tried many methods. The afterrender event works great.

Maybe I should somehow encapsulate the fields with a container that monitors click events?

Any clues would be greatly appreciated.

Answer 1

You can use the el property:

..
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 is an instance of Ext.Element (wrapper for html dom) w/c then you can use to handle events.