attempts to view created class cause "Object [object Object] has no method 'getId'"

[howHardCanItBe]

When I make a class a xtype I am having no problem adding it to a viewport or working with the object. When I create a class instance and attempt to add it to viewport or to my main container I get the "no method 'getId'" error. As you can see below I don't have a configuration object called Id so I am a bit lost as to what the problem is. What am I missing?

The class:

Ext.define('ArticlePage', {
    extends: 'Ext.Panel',
    id: 'Article_Page',
    layout: 'stretch',
    items: [
        {
            xtype: 'toolbar',
            docked: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'Back',
                    handler: function () {
                        console.log('test');
                    }
                },
                {
                    xtype: 'button',
                    text: 'Previous'
                },
                {
                    xtype: 'button',
                    text: 'Next'
                },
                {
                    xtype: 'spacer'
                },
                {
                    xtype: 'button',
                    text: 'Add to my folder'
                }
                //TODO body
            ]
        }
    ]
});

The function I am trying to create/show it in:

        this.element.on({
            click: function (e, t) {
                var article = Ext.create('ArticlePage');
                                
                // app is a panel that is card, ideally the class would be shown here
                //Ext.getCmp('app').add(article); 
                //Ext.getCmp('app').setActiveItem('Article_Page', { type: 'slide', direction: 'left' });


                // same error trying to add to viewport
                Ext.Viewport.add(article);
            }
        });

[rdougan]

You have a few issues:

- extend is the extend keyword, not extends
- you must define all configurations inside the config block when defining a class. Something like this:

Ext.define('ArticlePage', {
    extend: 'Ext.Panel',
    config: {
        id: 'ArticlePage',
        html: 'one'
    }
});

[howHardCanItBe]

Thanks for the ninja fast response. When it comes to adding things to the config is there any option for not creating the get/set/apply?