Question

我正在创建一个Viewport类，里面包含3个项目;带有＆＃39; container.Container＆＃39;的标题基类，网格与＆＃39; grid.Panel＆＃39;和form.Panel的表单。

问题是ExtJS会覆盖我创建的标题并呈现给网格面板＆＃39 ;;正如你猜测它包含一个较小的标题＆＃39;在面板内部并给出了这些错误：

[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设置（gridpanel，header）覆盖ExtJS定义的预定义别名。

查看例如， ExtJS GridPanel：

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

如果您为xtype定义了其他名称，则应该取消警告，以便区分您的组件和ExtJS提出的组件。

覆盖ExtJS 5.1.1中的现有映射

1 个答案: