1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    39
    Answers
    1
    Vote Rating
    4
    MattUCG is on a distinguished road

      0  

    Default Answered: Custom Panel Types

    Answered: Custom Panel Types


    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:

    Code:
    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' },
                ]
            })
        }
    });

  2. 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:

    Code:
    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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread