2

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

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

子类别.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 个选项卡中？

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

4

2 回答 2

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

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

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}']
        }]
    }
});
于 2013-09-22T17:35:04.963 回答
0 
Ext.define('RestaurantGlobal.view.SubCategoryListView',{
    extend: 'Ext.List',
    *xtype: 'SubCategoryListView',*

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

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

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

xtype: 'SubCategoryListView'

正如你所料。

于 2014-07-03T03:35:03.170 回答