Trying to create an inline edit form. I have a form that looks like this:

var editPic = "<img src='.png' alt='edit' height='24' width='24' style='margin-left: 10px;'/>";
var submitPic = "<img id='submitPic' src='.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',

items: [
    {name: 'id', hidden: true},

    {
        name: 'name',
        fieldLabel: 'Name',
        afterSubTpl: editPic,
        cls: 'editable'
    },
    {
        name: 'nameEdit',
        fieldLabel: 'Name',
        xtype: 'textfield',
        hidden: true,
        cls: 'editMode',
        allowBlank: false,
        afterSubTpl: submitPic
    }
]
});

The controller looks like this (a lot of events):

init: function() {
    this.control({
        'test-edit > displayfield': {
            afterrender: this.showEditable
        },
        'test-edit': {
            afterrender: this.formRendered
        },
        'test-edit > field[cls=editMode]': {
            specialkey: this.editField,
            blur: this.outOfFocus
        }
    });
},

outOfFocus: function(field, event) {
    console.log('Lost focus');
    this.revertToDisplayField(field);
},

revertToDisplayField: function(field) {
    field.previousNode().show();
    field.hide();
},

formRendered: function(form) {
    Ext.get('submitPic').on('click', function (event, object) {
        var field = Ext.get(object).parent().parent().parent().parent();
        var cmp = Ext.ComponentQuery.query('test-edit > field[cls=editMode]');
    });
},

editField: function(field, e) {
    var value = field.value;
    if (e.getKey() === e.ENTER) {
        if (!field.allowBlank && Ext.isEmpty(value)){
            console.log('Not permitted!');
        } else {
            var record = Ext.ComponentQuery.query('test-edit')[0].getForm().getRecord();
            Ext.Ajax.request({
                url: '../webapp/tests/update',
                method:'Post',
                params: {
                    id: record.getId(),
                    fieldName: field.name,
                    fieldValue: field.value
                },
                store: record.store,
                success: function(response, t){
                    field.previousNode().setValue(value);
                    t.store.reload();
                    var text = response.responseText;
                    // process server response here
                    console.log('Update successful!');
                }
            });

        }
        this.revertToDisplayField(field);

    } else if (e.getKey() === e.ESC) {
        console.log('gave up');
        this.revertToDisplayField(field);
    }
},

showEditable: function(df) {
    df.getEl().on("click", handleClick, this, df);

    function handleClick(e, t, df){
        e.preventDefault();
        var editable = df.nextNode();
        editable.setValue(df.getValue());
        editable.show();
        editable.focus();
        df.hide();
    }
},

I'm using the 'afterSubTpl' config to add the edit icon, and the accept icon. I have listeners set up to listen on click events concerning them, but after they are clicked, I only have the element created by Ext.get('submitPic'). Now I want to have access to the the Ext field and form that surround it. The parent method only brings back other DOM elements. How do I connect between them? You can see what I tried in formRendered.

I hope someone can clarify this little bit for me.

Trying to create an inline edit form. I have a form that looks like this:

var editPic = "<img src='https://s3.amazonaws./bzimages/pencil.png' alt='edit' height='24' width='24' style='margin-left: 10px;'/>";
var submitPic = "<img id='submitPic' src='https://s3.amazonaws./bzimages/submitPic.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',

items: [
    {name: 'id', hidden: true},

    {
        name: 'name',
        fieldLabel: 'Name',
        afterSubTpl: editPic,
        cls: 'editable'
    },
    {
        name: 'nameEdit',
        fieldLabel: 'Name',
        xtype: 'textfield',
        hidden: true,
        cls: 'editMode',
        allowBlank: false,
        afterSubTpl: submitPic
    }
]
});

The controller looks like this (a lot of events):

init: function() {
    this.control({
        'test-edit > displayfield': {
            afterrender: this.showEditable
        },
        'test-edit': {
            afterrender: this.formRendered
        },
        'test-edit > field[cls=editMode]': {
            specialkey: this.editField,
            blur: this.outOfFocus
        }
    });
},

outOfFocus: function(field, event) {
    console.log('Lost focus');
    this.revertToDisplayField(field);
},

revertToDisplayField: function(field) {
    field.previousNode().show();
    field.hide();
},

formRendered: function(form) {
    Ext.get('submitPic').on('click', function (event, object) {
        var field = Ext.get(object).parent().parent().parent().parent();
        var cmp = Ext.ComponentQuery.query('test-edit > field[cls=editMode]');
    });
},

editField: function(field, e) {
    var value = field.value;
    if (e.getKey() === e.ENTER) {
        if (!field.allowBlank && Ext.isEmpty(value)){
            console.log('Not permitted!');
        } else {
            var record = Ext.ComponentQuery.query('test-edit')[0].getForm().getRecord();
            Ext.Ajax.request({
                url: '../webapp/tests/update',
                method:'Post',
                params: {
                    id: record.getId(),
                    fieldName: field.name,
                    fieldValue: field.value
                },
                store: record.store,
                success: function(response, t){
                    field.previousNode().setValue(value);
                    t.store.reload();
                    var text = response.responseText;
                    // process server response here
                    console.log('Update successful!');
                }
            });

        }
        this.revertToDisplayField(field);

    } else if (e.getKey() === e.ESC) {
        console.log('gave up');
        this.revertToDisplayField(field);
    }
},

showEditable: function(df) {
    df.getEl().on("click", handleClick, this, df);

    function handleClick(e, t, df){
        e.preventDefault();
        var editable = df.nextNode();
        editable.setValue(df.getValue());
        editable.show();
        editable.focus();
        df.hide();
    }
},

I'm using the 'afterSubTpl' config to add the edit icon, and the accept icon. I have listeners set up to listen on click events concerning them, but after they are clicked, I only have the element created by Ext.get('submitPic'). Now I want to have access to the the Ext field and form that surround it. The parent method only brings back other DOM elements. How do I connect between them? You can see what I tried in formRendered.

I hope someone can clarify this little bit for me.

• javascript
• extjs4.1

• I'm pretty sure that there are better solutions for what you are trying to do. But anyway, have you tried giving the on method a third parameter which is either your field or your form? Something like Ext.get('submitPic').on('click', function( ... ){ ... }, form); – Izhaki Commented Aug 26, 2012 at 22:22
• What good will it do? I don't have access to it from within the click function. Am I missing something? What are the better solutions that you suggest, I would love to hear them? 10x anyway. – bldoron Commented Aug 27, 2012 at 5:42
• If form is given as the scope parameter, you'll have access to it using 'this'. – Izhaki Commented Aug 27, 2012 at 9:55
• Anyway, am I correct you just want to add an external Icon next to a textfield and hook on the icon click? – Izhaki Commented Aug 27, 2012 at 9:58
• Yes. You are correct. I tried this with a button field, but that didn't look so good. – bldoron Commented Aug 27, 2012 at 11:13

2 Answers 2

Walk up the DOM tree until you find a ponent for the element's id:

 getCmpFromEl = function(el) {
    var body = Ext.getBody();
    var cmp;
    do {
        cmp = Ext.getCmp(el.id);
        el = el.parentNode;
    } while (!cmp && el !== body);
    return cmp;
}

Ext.Component.from(el) does exactly this since ExtJS 6.5.0, as I just learnt. Doc Source

You can get the ponent by id, but only if your ponent and its dom element have the same id (they usually do):

Ext.getCmp(yourelement.id)

But this is not exactly good practice -- it would be better to set up your listeners so that the handler methods already have a reference to the ponent. For example, in your 'submitPic' ponent, you could define the click listener like this:

var me = this;
me.on({
    click: function(arguments){
         var cmp = me;
         ...

});