Question

我一直在尝试在我的一个视图中添加自定义类，但是当我运行应用程序时，我在控制台日志中收到错误“无法创建无法识别的别名实例：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'
                }
            ]
        }
    ]
  }
});

请在这方面帮助我。另外，有没有办法过滤单个商店，将它们显示在同一个tabpanel中的2个标签中？

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

Answer 1

罪魁祸首是：

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方法，因此每个实例都将拥有自己的子组件实例（抱歉，我知道这会使“实例”这个词重复很多）。 / p>

无论如何，看起来你真正想做的只是覆盖列表类：

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

Answer 2

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

问题是你在类定义中使用了xtype但它可能是别名：

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

然后您可以使用此类在这种情况下通过以下方式创建列表：

xtype: 'SubCategoryListView'

如你所料。

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

2 个答案: