Why do I get "TypeError: item.onAdded is not a function" when adding component to container?

Question

I am trying to create a framework UI that creates container contents based on configs, and I get an error "TypeError: item.onAdded is not a function".

This does not happen in my smaller test app, but it does happen in our actual app. Can't figure out why.

Here is some partial code.

Ext.define('atlas.screen.Viewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.atlas.Viewport',

    autoScroll: true,
    layout: 'fit',

    requires: [
        'base.framework.MainAppView',
        'base.framework.MainAppNavigation'
    ],

    items: [{
        // MainAppView requires providing config with items to populate the north,
        // west, and center regions.
        xtype: 'mainAppView',
        westItems: [{
            xtype: 'mainAppNavigation'
        }]
     }]
});

Ext.define('base.framework.MainAppView', {
    extend: 'Ext.container.Container',
    alias: 'widget.mainAppView',

    requires: ['base.util.CommonBaseUtil'],

    autoScroll: true,
    layout: 'border',

    westItems: null,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'container',
                itemId: 'appWestContainer',
                region: 'west',
                width: 85,
                items: me.westItems,
                hidden: true,
                listeners: {
                    afterrender: CommonBaseUtil.showHide
                }
            }]
        });
        me.callParent(arguments);
    },

    applyWestItems: function(westItems) {
        this.down('#appWestContainer').add(westItems);
    }
});

Ext.define('base.framework.MainAppNavigation', {
    extends: 'Ext.container.Container',

    alias: 'widget.mainAppNavigation',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'button',
                itemId: 'myButton',
                text: 'test'
            }]
        });
        me.callParent(arguments);
    }
});

Have you debugged in chrome or to see where .onAdded is being called? — Bit
– Bit, Commented May 20, 2014 at 20:41

Greg Lafrance · Accepted Answer · 2014-05-20 23:58:51Z

15

It was one of my favorite BS ExtJS issues, "extends" VS "extend". You would think Sencha Cmd could catch this.

answered May 20, 2014 at 23:58

Greg Lafrance

8091 gold badge15 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cameron Chapman Over a year ago

What a pain, I'll never get that hour back!

Fygo Over a year ago

I would upvote this 3 times if I could... un-be-lievable!

Collectives™ on Stack Overflow

Why do I get "TypeError: item.onAdded is not a function" when adding component to container?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related