覆盖ExtJS 5.1.1中的现有映射
问题描述:
我正在创建一个Viewport类,它包含3个项目; a 标题'container.Container'基类,表格'grid.Panel'和表格与form.Panel。覆盖ExtJS 5.1.1中的现有映射
问题是ExtJS重写我创建的头并呈现为'Grid Panel';因为您会猜测它包含面板内部较小的“标题”并给出了这些错误:
[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);
}
});
答
看来你通过你的xtype设置(GridPanel中标题)ExtJS的定义预定义的别名覆盖。
查看例如ExtJS的的GridPanel:
...
alias: ['widget.gridpanel', 'widget.grid']
...
,如果你定义的xtype,你无论如何都应该以你的组件,并通过茨艾伦ExtJS的eprovided区分其他名称的警告应该消失。
+0
我改变了所有视图的'xtype'定义,并且它没有任何警告地工作。此外,我已将'header'配置更改为'true'并显示**标题**。 –
我不知道这是一个正确的调整!但是我在GridPanel类中添加了'header:false'配置。所以现在它走了... –
好!但这个配置会产生另一个错误;由于标题为false,并且网格面板的标题未显示Ext.panel.Title组件的标题文本或配置对象。当指定标题时,除非标头设置为false,否则将自动创建并显示Ext.panel.Header。“@ http://docs.sencha.com/extjs/5.1.1/api/Ext.grid.Panel .html#cfg-title –