无法创建别名无法识别的实例：widget。[object Object]

debugcn 发表于 Dev

永恒跳蚤

我一直试图在一个视图中添加自定义类，但是在运行应用程序时，控制台日志中出现错误“无法创建无法识别的别名的实例：widget。[object Object]”。我的代码如下：

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

请在这方面帮助我。另外，是否有办法过滤单个商店以将它们显示在同一选项卡面板中的2个选项卡中？

在这种情况下，我不使用标签面板。

rixo

罪魁祸首是：

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

xtype 必须是一个字符串。

理论上，您可以将组件实例直接放在中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}']
        }],
    }
]

但是在类定义的上下文中，这确实会受到启发，因为您创建的类的每个实例都将使用相同的组件实例。最有可能导致很多问题...

如果您真的需要自己创建组件实例，因为您不能简单地声明其配置，则可以通过重写initComponent方法并在其中创建组件来进行配置。该initComponent方法将为您的类的每个新实例调用，因此每个实例都有其自己的子组件实例（对不起，我知道很多重复“ instance”一词）。

无论如何，似乎您真正想做的只是覆盖列表类：

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