initComponent is not working for Ext.panel.Panel

Question

I currently playing with this embedded fiddle in the documentation https://docs.sencha.com/extjs/7.6.0/classic/Ext.grid.Panel.html:

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
        { name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
        { name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
        { name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    
     // START added code
    initComponent: function () {
        this.callParent();
    }
    // END added code
});

As you can see I added the .initComponent() config and has a call to the this.callParent() as described in the documentation. I am assuming this will work and is the same as without the code, since initComponent is described as a template method and the only requirement is calling this.callParent().

I am wondering what could be missing as the panel is not rendering correctly in the view.

I also tried passing the arguments using the following was but has no luck:

this.callParent.apply(this, arguments);

this.callParent(arguments);

Answer 1

The initComponent method needs to be defined while defining the component. If you override the method inline while creating an instance of a component, the initComponent method won't be invoked.

More on this - https://docs-devel.sencha.com/extjs/7.6.0/classic/Ext.Component.html#method-initComponent

Here is how you can refactor your code:

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
        { name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
        { name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
        { name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
    ]
});

Define your component here

Ext.define('MyComponent', {
    extend: 'Ext.grid.Panel',
    xtype: 'mycomponent',
    title: 'Simpsons',
    
    
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    
    // START added code
    initComponent: function () {
        this.callParent();
        console.log('Hi');
    }
    // END added code
});

And use the component like below:

Ext.create({
    xtype: 'mycomponent',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
});

It will log 'Hi' in console.