Databases
StackOverflow2013
Postsdbo
POAdding a click event to displayfield
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding a click event to displayfield
    text
    copied!<p>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.</p> <p>I've seen a similar question <a href="https://stackoverflow.com/questions/8330088/switch-from-textfield-to-displayfield-with-extjs4">here</a>, but no answer.</p> <p>This is my form:</p> <pre><code>var editPic = "&lt;img src='https://s3.amazonaws.com/bzimages/pencil.png' alt='edit' height='24' width='24'/&gt;"; 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'} ] }); </code></pre> <p>This is the control inside my controller:</p> <pre><code> this.control({ 'test-edit': { afterrender: this.beenRendered }, 'test-edit &gt; 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'); } }, </code></pre> <p>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.</p> <p>Maybe I should somehow encapsulate the fields with a container that monitors click events?</p> <p>Any clues would be greatly appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload