Css ExtJS组合框未正确呈现
我使用ExtJS 6.2在管理仪表板模板的表单面板中设置了以下字段:Css ExtJS组合框未正确呈现,css,extjs,Css,Extjs,我使用ExtJS 6.2在管理仪表板模板的表单面板中设置了以下字段: { xtype: 'fieldset', layout: 'anchor', items: [{ xtype: 'combobox', listeners : { select : function() { console.log(arguments)
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
它工作正常,但渲染非常奇怪,如下图所示,我不得不屏蔽显示的数据,但数字是从组合框中选择的:
我假设这是一个CSS问题,但还没有弄清楚是什么。注意:创建模板后,我必须将build/examples/Admin dashboard/classic/resources文件夹中的Admin-all.css Admin-all_1.css Admin-all_2.css和Admin-all_3.css复制到应用程序中,以修复一个主要的布局问题 是的,这是一个CSS问题。管理仪表板示例及其CSS是使用Sencha Cmd编译的,因此CSS文件只包含示例所需的样式。由于示例中没有组合框,因此未添加组合框样式,并且插入的组合框无法正确渲染
唯一的解决方案是使用Sencha Cmd从源代码重新编译,并在过程中修复布局问题,我猜这是由于缺少requires指令造成的。这似乎已经做到了。我没有提到的一件奇怪的事情是,我确实尝试过在Ext.form.field.ComboBox中加入requires,但即使在进行另一个sencha构建之后,它也没有按照预期工作。似乎丢失的关键是必须关闭应用程序并重新启动我正在使用的Webstorm服务器。一旦我这样做了,组合框就会按预期呈现。