Cannot create an instance of unrecognized alias: widget.[object Object]

Question

I have been trying to add a custom class into one of my views but when I run the application, I get an error in the console log "Cannot create an instance of unrecognized alias: widget.[object Object]". My code is as follows:

SubCategoryListView.js

Ext.define('RestaurantGlobal.view.SubCategoryListView',{
      extend: 'Ext.List',
      xtype: 'SubCategoryListView',

      requires: ['RestaurantGlobal.store.ItemColumnsStore'],

config:{
    items:[
        {
            xtype: Ext.create('Ext.List', {
                fullscreen: true,
                items: [{
                    xtype: 'toolbar',
                    docked: 'top',
                    ui: 'neutral',
                    items: [
                        {
                            text:'Veg',
                            align :'center',
                            handler: function () {
                                var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore');
                                // clear all existing filters
                                sto.clearFilter();
                                sto.filter('Info2', 'False');
                            }
                        },
                        {
                            text:'Non-Veg',
                            align :'center',
                            handler: function () {
                                var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore');
                                // clear all existing filters
                                sto.clearFilter();
                                sto.filter('Info2', 'True');
                            }
                        },
                    ],
                    store: 'RestaurantGlobal.store.ItemColumnsStore',
                    itemTpl: ['{Name}  {Image}']
                }],
            }),
        }
    ]
  }
});

SubCategories.js

     Ext.define('RestaurantGlobal.view.SubCategories', {
extend: 'Ext.Panel',

requires : ['RestaurantGlobal.view.SubCategoryListView'],

config: {
    styleHtmlCls: 'maincontainer',
    styleHtmlContent: true,
    layout: {
        type: 'vbox'
    },
    items: [
        {
            xtype: 'titlebar',
            flex: 0.5,
            docked: 'top',
            title: 'Category Name'
        },
        {
            xtype: 'SubCategoryListView',
        },

            {
            xtype: 'container',
            items: [
                {
                    xtype: 'button',
                    docked: 'bottom',
                    margin: '0 0 0 0',
                    text: 'Place Order'
                }
            ]
        }
    ]
  }
});

Please help me in this regard. Also, is there a way to filter a single store to display them into 2 tabs in the same tabpanel?

I am not using tab panel in this case.

Answer 1

The culprit is this:

xtype: Ext.create('Ext.List', {

xtype must be a string.

You can theoritically put a component instance directly in the items:

items:[
    Ext.create('Ext.List', {
        fullscreen: true,
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            ui: 'neutral',
            items: [
                {
                    text:'Veg',
                    align :'center',
                    handler: function () {
                        var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore');
                        // clear all existing filters
                        sto.clearFilter();
                        sto.filter('Info2', 'False');
                    }
                },
                {
                    text:'Non-Veg',
                    align :'center',
                    handler: function () {
                        var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore');
                        // clear all existing filters
                        sto.clearFilter();
                        sto.filter('Info2', 'True');
                    }
                },
            ],
            store: 'RestaurantGlobal.store.ItemColumnsStore',
            itemTpl: ['{Name}  {Image}']
        }],
    }
]

But in the context of a class definition that would really be ill inspired because this same component instance would be used by every instance you create of your class. Most probably resulting in a lot of problems...

In case you really need to create the component instance yourself, because you can't simply declare its configuration, do it by overriding the initComponent method, and create your component in there. The initComponent method will be called for each new instance of your class, so each one will have its own instance of the child component (sorry, I know that makes a lot of repetitions of the word "instance").

Anyway, it seems that what you are really trying to do is simply to override the list class:

Ext.define('RestaurantGlobal.view.SubCategoryListView',{
    extend: 'Ext.List',
    xtype: 'SubCategoryListView',

    requires: ['RestaurantGlobal.store.ItemColumnsStore'],

    // You class is already a list, just add your custom configuration
    // directly to it:
    config:{
        fullscreen: true,
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            ui: 'neutral',
            items: [{
                text:'Veg',
                align :'center',
                handler: function () {
                    var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore');
                    // clear all existing filters
                    sto.clearFilter();
                    sto.filter('Info2', 'False');
                }
            },{
                text:'Non-Veg',
                align :'center',
                handler: function () {
                    var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore');
                    // clear all existing filters
                    sto.clearFilter();
                    sto.filter('Info2', 'True');
                }
            }],
            store: 'RestaurantGlobal.store.ItemColumnsStore',
            itemTpl: ['{Name}  {Image}']
        }]
    }
});