Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to force ExtJS to consider value in grid cell changed after custom editing completes?
    primarykey
    data
    text
    <p>I have an ExtJS EditorGridPanel with several columns. One of the columns is bound to a complex data type (an array of objects), and uses a custom editor to modify those values in a pop-up window. That part is tested and all works fine - the JsonStore is keeping the complex values, setting the custom editor's value when it's focused and editing begins, and picking up the final value when editing is complete.</p> <p>The only problem is, for this complex data type, the Javascript string value does not appear to include the sub-attributes, but is instead represented as "[object Object]". Therefore, if the array contains two items when editing begins, and two items after editing is complete, even if some of the sub-attributes of the two items have changed, the grid editor doesn't know this, because <code>(String)value === (String)startValue</code> (that is, <code>'[object Object],[object Object]' === '[object Object],[object Object]'</code>).</p> <p>I'm certain this is the problem, because if the custom sub-editor increases the number of items in the list, the string values <strong>are</strong> different (<code>'[object Object],[object Object],[object Object]' !== '[object Object],[object Object]'</code>), and the value properly changes (with change event propagating to the store).</p> <p>The complete onEditComplete function of the EditorGridPanel is shown below (full source <a href="http://dev.sencha.com/deploy/ext/docs/source/EditorGrid.html" rel="nofollow">here</a>):</p> <blockquote> <pre><code>onEditComplete : function(ed, value, startValue){ this.editing = false; this.lastActiveEditor = this.activeEditor; this.activeEditor = null; var r = ed.record, field = this.colModel.getDataIndex(ed.col); value = this.postEditValue(value, startValue, r, field); if(this.forceValidation === true || String(value) !== String(startValue)){ var e = { grid: this, record: r, field: field, originalValue: startValue, value: value, row: ed.row, column: ed.col, cancel:false }; if(this.fireEvent("validateedit", e) !== false &amp;&amp; !e.cancel &amp;&amp; String(value) !== String(startValue)){ r.set(field, e.value); delete e.cancel; this.fireEvent("afteredit", e); } } this.view.focusCell(ed.row, ed.col); }, </code></pre> </blockquote> <p>So there are a number of possible solutions, but I don't know how to make any of them work.</p> <ol> <li>Provide a custom GridEditor for this particular column of the EditorGrid, which considers the startValue to always be some dummy value, so that the <code>String(value) !== String(startValue))</code> clause above is always true. This seems difficult because you don't have access to the GridEditor from within the custom field (since it is in the Field hierarchy and doesn't know about the GridEditor controlling it).</li> <li>Somehow get a handle on the GridEditor being used to control my custom Field, from some kind of event. If I can do that, I can set the startValue (a public property) to some dummy value that is known to be different from the final value. Then the normal "changed value" code will work as expected. I haven't found any reasonable way to get a handle to this editor from within my field, however.</li> <li>Convince Javascript to spit out all of the sub-attributes of my objects into the String representation, so that if my object is</li> </ol> <blockquote> <p>var myObj = { 'objId': 1, 'objValue': value };</p> <p>var myValue = [myObj];</p> </blockquote> <p>then instead of (String)myValue being <code>'[object Object]'</code>, it will instead be something like <code>'[{objId:1,objValue:value}]'</code>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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