代码之家  ›  专栏  ›  技术社区  ›  horcle_buzz

ExtJS组合框未正确渲染

  •  0
  • horcle_buzz  · 技术社区  · 7 年前

    我使用ExtJS 6.2在管理仪表板模板的表单面板中设置了以下字段:

        {
            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>'
                }
    
    
            }]
        },
    

    它工作正常,但渲染相当奇怪,如下图所示(我不得不屏蔽显示的数据,但数字是从组合框中选择的):

    rendering issue with combobox

    我假设这是一个CSS问题,但还没有弄清楚是什么。NB:我不得不全部复制。css Admin-all_1.css Admin-all_2.css和Admin-all_3.css从build/examples/Admin dashboard/classic/resources文件夹到应用程序,在我创建模板后,为了修复一个主要的布局问题。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Alexander    7 年前

    是的,这是一个CSS问题。管理仪表板示例及其CSS是使用Sencha Cmd编译的,因此CSS文件仅包含示例所需的样式。由于示例中没有组合框,因此没有添加组合框样式,并且插入的组合框无法正确渲染。

    requires