覆盖 ExtJS 5.1.1 中的现有映射

Question

我正在创建一个 Viewport 类，其中包含 3 个项目；一个带有'container.Container'基类的Header，一个带有'grid.Panel'的Grid和一个带有form.Panel的Form。

问题是 ExtJS 覆盖了我创建的标题并呈现到“网格面板”；你会猜到它在面板内包含一个较小的“标题”并给出这些错误：

[W] Overriding existing mapping: 'widget.header' From 'Ext.panel.Header' to 'Employee.view.MainHeader'. Is this intentional?
[W] Overriding existing mapping: 'widget.gridpanel' From 'Ext.grid.Panel' to 'Employee.view.GridPanel'. Is this intentional?

这就是它的样子！ 我没有为 Header 类和 Gridpanel 定义任何别名。仅提供 xtype 属性仅此而已。为什么会发生这种情况？

谢谢？

这是标题：

Ext.define('Employee.view.MainHeader', {
    extend: 'Ext.container.Container',
    xtype: 'header',
    requires: [
        'Ext.button.Button',
        'Ext.form.field.Text' 
    ],
    layout: {
        type: 'hbox',
        align: 'center'
    },
    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            items: [{
                xtype: 'container',
                width: 600,
                padding: 5,
                items: [{
                    xtype: 'image',
                    height: 95,
                    width: 95,
                    src: 'https://openclipart.org/image/2400px/svg_to_png/69109/Free-Culture-Logo-Orange.png'   
                }]
            }, {
                xtype: 'container',
                cls: 'search',
                items: [{
                    xtype: 'textfield',
                    width: 350
                }, {
                    xtype: 'button',
                    text: 'Search',
                    handler: function () {
                        alert('this is the Search feature!');
                    }
                }]
            }]
        });
        me.callParent(arguments);
    } 
});

和 GridPanel：

Ext.define('Employee.view.GridPanel', {
    extend: 'Ext.grid.Panel',
    xtype: 'gridpanel',
    store: 'EmployeeStr',
    title: 'ORest Employee Table',
    viewConfig: {
        markDirty: false,
        stripeRows: false
    },
    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            tools: [{
                type: 'refresh',
                tooltip: 'Refresh the DB',
                handler: function () {alert('Refresh click');}
            }],
            columns: [{
                xtype: 'numbercolumn',
                dataIndex: 'id',
                flex: 0,
                text: 'ID'
            }, {
                xtype: 'gridcolumn',
                dataIndex: 'code',
                flex: 1,
                text: 'Code'
            }, {
                xtype: 'gridcolumn',
                dataIndex: 'firstName',
                flex: 1,
                text: 'First Name'
            }, {
                xtype: 'gridcolumn',
                dataIndex: 'lastName',
                flex: 1,
                text: 'Last Name'
            }, {
                xtype: 'gridcolumn',
                dataIndex: 'email',
                flex: 1,
                text: 'Email'
            }, {
                xtype: 'gridcolumn',
                dataIndex: 'active',
                flex: 0,
                text: 'Status'
            }],
            dockedItems: [{
                xtype: 'pagingtoolbar',
                store: 'EmployeeStr',
                dock: 'bottom',
                displayInfo: true
            }]
        });
        me.callParent(arguments);
    }
});

Answer 1

您似乎通过您的 xtype 设置（网格面板、标题）覆盖了 ExtJS 定义的预定义别名。

看看源代码例如ExtJS 网格面板：

...    
alias: ['widget.gridpanel', 'widget.grid']
...

如果您为 xtype 定义其他名称，则警告应该消失，无论如何您都应该这样做以区分您的组件和 ExtJS 提供的组件。