Custom Panel Types

[MattUCG]

I am attempting to create a Tab Panel in which each panel is its own custom type. I have simplified the concept as much as possible, but eventually the custom panel types will have logic and styling rather than just a simple string of html content.

The attached code generates the following error message in Chrome:

Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.App.PanelTypeOne

Can someone help me understand why the following does not work using developer preview 3:

Ext.define('App.PanelTypeOne', {
    extend: 'Ext.Panel',
    html: 'viewing panel type one'
});


Ext.define('App.PanelTypeTwo', {
    extend: 'Ext.Panel',
    html: 'viewing panel type two'
});


Ext.application({
    name: 'Test App',


    launch: function () {
        Ext.create("Ext.TabPanel", {
            fullscreen: true,
            defaults: { styleHtmlContent: true },
            tabBar: {
                layout: { pack: 'center' },
                dock: 'bottom'
            },


            items: [
                { xtype: 'App.PanelTypeOne', title: 'Type One', iconCls: 'bookmarks' },
                { xtype: 'App.PanelTypeTwo', title: 'Type Two', iconCls: 'info' },
            ]
        })
    }
});

[mitchellsimoens]

First, your name you specified in Ext.application shouldn't have a space in it.

Second, to create your own xtype, you can simply add the xtype property to you Ext.define call:

Ext.define('App.PanelTypeOne', {
    extend : 'Ext.Panel',
    xtype  : 'paneltypeone',

    config : {
        html: 'viewing panel type one'
    }
});

One note about xtypes, you can't have periods in them. You should use a different special character like '_' or '-', periods mean something to ComponentQuery.