ExtJS Combobox nicht korrekt gerendert

Question

Ich habe folgendes Fieldset in einem Formular-Panel in der Vorlage Admin-Dashboard mit 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>' 
      } 


     }] 
    }, 

Es funktioniert gut, aber es ist Rendering eher seltsam, wie im folgenden zu sehen Bild (ich hatte die Daten werden präsentiert zu maskieren, aber die Zahlen sind, was aus der Combobox ausgewählt werden):

ich gehe davon aus das ein CSS Problem ist, habe aber nicht in der Lage gewesen, um herauszufinden, Was. Hinweis: Ich musste Admin-all.css Admin-all_1.css Admin-all_2.css und Admin-all_3.css aus dem Ordner build/examples/admin-dashboard/classic/resources in die App kopieren, nachdem ich die Vorlage erstellt hatte um ein großes Layout-Problem zu beheben.

Answer 1

Ja, dies ist ein CSS-Problem. Das Admin-Dashboard-Beispiel und dessen CSS wurden mit Sencha Cmd kompiliert, sodass die CSS-Datei nur die im Beispiel benötigten Stile enthält. Da in diesem Beispiel keine Combobox vorhanden ist, wurden die Combobox-Stile nicht hinzugefügt und die von Ihnen eingefügte Combobox wird nicht korrekt dargestellt.

Die einzige Lösung wäre, Sencha Cmd zu verwenden, um von der Quelle neu zu kompilieren und das Layoutproblem auf dem Weg zu beheben, was vermutlich auf eine fehlende requires Direktive zurückzuführen ist.