TypeError: Cannot read properties of null (reading 'value') in ExtJs 7.5.0.55

Question

TypeError: Cannot read properties of null (reading 'value')

Maybe this error happens after deleting record from the store on a grid. Component is exist, but dom tree is not.

Ext component: 'Ext.form.field.Text'. Owner component: 'Ext.grid.CellEditor'.

This is the stack trace.

getValue (ext-all-debug.js:42727)
getRawValue (ext-all-debug.js:192596)
getValue (ext-all-debug.js:192693)
checkChange (ext-all-debug.js:191739)
onBeforeNotify (ext-all-debug.js:193044)
fire (ext-all-debug.js:22906)
doFireEvent (ext-all-debug.js:23946)
prototype.doFireEvent (ext-all-debug.js:66512)
fireEventArgs (ext-all-debug.js:23800)
fireEvent (ext-all-debug.js:23757)
notify (ext-all-debug.js:110015)
onTick (ext-all-debug.js:110069)
(anonymous) (ext-all-debug.js:7365)
elevate (ext-all-debug.js:2574)
timerFn (ext-all-debug.js:7590)
setTimeout (async)
defer (ext-all-debug.js:7593)
scheduleTick (ext-all-debug.js:110096)
scheduleItem (ext-all-debug.js:110084)
schedule (ext-all-debug.js:112438)
invalidate (ext-all-debug.js:113166)
afterEdit (ext-all-debug.js:113285)
callJoined (ext-all-debug.js:97316)
set (ext-all-debug.js:95730)
onEditComplete (ext-all-debug.js:254211)
onEditComplete (ext-all-debug.js:221565)
completeEdit (ext-all-debug.js:162962)
callParent (ext-all-debug.js:13649)
completeEdit (ext-all-debug.js:221526)
onFocusLeave (ext-all-debug.js:221500)
onGlobalFocus (ext-all-debug.js:30599)
fire (ext-all-debug.js:22906)
doFireEvent (ext-all-debug.js:23946)
prototype.doFireEvent (ext-all-debug.js:66512)
fireEventArgs (ext-all-debug.js:23800)
fireEvent (ext-all-debug.js:23757)
processFocusIn (ext-all-debug.js:141175)
publishDelegatedDomEvent (ext-all-debug.js:141118)
doDelegatedEvent (ext-all-debug.js:37990)
onDelegatedEvent (ext-all-debug.js:37977)
focus (ext-all-debug.js:42034)
setActionableMode (ext-all-debug.js:230448)
setActionableMode (ext-all-debug.js:224447)
setPosition (ext-all-debug.js:225599)
onContainerMouseDown (ext-all-debug.js:225234)
fire (ext-all-debug.js:22906)
doFireEvent (ext-all-debug.js:23946)
doFireEvent (ext-all-debug.js:75015)
prototype.doFireEvent (ext-all-debug.js:66512)
fireEventArgs (ext-all-debug.js:23800)
fireEvent (ext-all-debug.js:23757)
processUIEvent (ext-all-debug.js:206408)
handleEvent (ext-all-debug.js:206346)
fire (ext-all-debug.js:22906)
fire (ext-all-debug.js:37964)
publish (ext-all-debug.js:37924)
publishGestures (ext-all-debug.js:38655)
onTouchStart (ext-all-debug.js:38783)
publishDelegatedDomEvent (ext-all-debug.js:38740)
doDelegatedEvent (ext-all-debug.js:37990)
onDelegatedEvent (ext-all-debug.js:37977)

Catch error on ext-all-debug.js method.

/**
         * Returns the value of the `value` attribute.
         * @param {Boolean} asNumber `true` to parse the value as a number.
         * @return {String/Number}
         */
        getValue: function(asNumber) {
            var value = this.dom.value;
            return asNumber ? parseInt(value, 10) : value;
        }

I tried to hide Ext.grid.CellEditor.

Answer 1

Debug these methods, you find something. Looks like Component does not have a store or record.

• onEditComplete (ext-all-debug.js:254211)
• onEditComplete (ext-all-debug.js:221565)
• completeEdit

Maybe this error happens after deleting record from the store on a grid. Component is exist, but dom tree is not.

Once you delete record from store, it should update the Grid automatically as store is refreshed. If this is not happening, You could try store autoSync: true

https://docs.sencha.com/extjs/7.7.0/classic/Ext.data.Store.html#cfg-autoSync