Results 1 to 2 of 2

Thread: Custom Panel Types

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    39
    Answers
    1
    Vote Rating
    4
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •