Question

我使用ExtJS 6.2在Admin Dashboard模板的表单Panel中有以下字段集：

    {
        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-all.css Admin-all_1.css Admin-all_2.css和Admin-all_3.css从build / examples / admin-dashboard / classic / resources文件夹复制到应用程序为了解决一个主要的布局问题。

Answer 1

是的，这是一个CSS问题。 Admin Dashboard示例及其CSS已使用Sencha Cmd编译，因此CSS文件仅包含示例所需的样式。由于示例中没有组合框，因此未添加组合框样式，并且插入的组合框无法正确呈现。

唯一的解决方案是使用Sencha Cmd从源代码重新编译并修复布局问题，我猜这是由于缺少requires指令引起的。

ExtJS Combobox无法正确渲染

1 个答案: