Using Ext JS version 7.1.0.46 I am unable to override initComponent() when defining my subclass. I get this error every time:
ext-all-debug.js:13635 Uncaught TypeError: Cannot read properties of null (reading '$owner')
at constructor.callParent (ext-all-debug.js:13635:29)
at constructor.initComponent (BasicConfigPanel.js:15:8)
at constructor (ext-all-debug.js:74096:12)
at new constructor (ext-all-debug.js:14562:37)
at eval (eval at getInstantiator (ext-all-debug.js:16489:60), <anonymous>:3:8)
at Object.create (ext-all-debug.js:17023:56)
at createBasicPanel (BasicConfigPanel.js:165:20)
at loadGuiPanels (misc.js:45:2)
at constructor.onLoad (config2.js:33:5)
at constructor.fire (ext-all-debug.js:22895:42)
const BasicConfigPanel = Ext.define('Acme.BasicConfigPanel', {
extend: 'Ext.form.Panel',
initComponent: function () {
this.callParent();
}
});
export function createBasicPanel() {
const panel = Ext.create(BasicConfigPanel, {renderTo: document.body});
return panel;
}
If I comment out these three lines in my BasicConfigPanel the error goes away:
// initComponent: function () {
// this.callParent();
// },
Am I doing something wrong? I also tried this.callParent(arguments) but it too is errors out.
this is being used in the wrong context.
You can achieve it by putting your definition part in a function like here:
const createBasicConfigPanel = function (className) {
return Ext.define(className, {
extend: 'Ext.form.Panel',
title: className,
initComponent: function () {
this.callParent();
}
});
}
const p = Ext.create(createBasicConfigPanel('Acme.BasicConfigPanel'), {
renderTo: document.body
});
Here you can find an example:
https://fiddle.sencha.com/#view/editor&fiddle/3ivv
Sometimes it can be useful to give Ext.define a callback.
I think it has nothing to do where you define your class. It should work if you run it in a controller as well.
When does this error appear? During page load? It might be useful to ensure Ext.form.Panel is loaded prior you are calling to create your form panel.
This depends how you build your app / extension. In case using Sencha Cmd you would require it.
https://docs.sencha.com/extjs/6.5.3/classic/Ext.html#method-require
You seem to define the class in a controller. At the point you are defining it this is not the scope of the formpanel, but the controller.
You have to create a new file with the definition.
What if you switch to using the string name, rather than trying to pass a variable.
Ext.define('Acme.BasicConfigPanel', {
extend: 'Ext.form.Panel',
initComponent: function () {
this.callParent();
}
});
export function createBasicPanel() {
const panel = Ext.create('Acme.BasicConfigPanel', {renderTo: document.body});
return panel;
}