extjs6 Rasterhöhe anpassen

Question

Ich versuche die Höhe der Zeilen in meinem extjs Raster zu ändern. Versuchen, die verschiedenen Möglichkeiten zu verstehen, dies zu erreichen, lesen Sie den Themenführer in den extjs6-Dokumenten. Von dem, was ich verstehe, ist die am häufigsten verwendete Methode, ein cls: zu erstellen. Ich habe versucht, ein Geige Beispiel zu verwenden, aber scheint überhaupt nichts zu tun.

Ext.create('Ext.grid.Panel', { 
    store: store, 
    cls: 'custom-grid', 
    columns: [ 
     {text: "Name", width:120, dataIndex: 'Name'}, 
     {text: "DOB", width: 120, dataIndex: 'dob', renderer: Ext.util.Format.dateRenderer('M d, Y'), }, 
     {text: "Age", width:40, 
      renderer : function(value, metaData, record, rowIdx, colIdx, store, view){ 
       return calcAge(record.get('dob')); 
      } 
     } 

    ], 
    renderTo:'example-grid', 
    width: 320, 
    height: 280, 
    viewConfig: { 
     stripeRows: false, 
     getRowClass: function(record) { 
      return calcAge(record.get('dob')) < 18 ? 'minor' : 'adult'; 
     } 
    } 
});    

});

unten ist mein css Ich versuche

.custom-grid .x-grid-row-table TD { 
line-height: 4px; 
} 

.custom-grid .x-grid-row { 
height: 25px; 
} 

zu verwenden --- UNTER AREA jetzt zu arbeiten SCHEINT ----

Dies scheint in Geige zu arbeiten, aber ich weiß nicht, wo setzen die CSS in meiner Dateistruktur

.custom-grid .x-grid-row { 
background: red; 
line-height: 1px; 
} 

Das Gremium, das die Gitter enthält befindet sich in app/view/clientdetails/clientdetails.js so habe ich versucht, die CSS-Code in app/packages/local/my-classic-theme2/sass/src/view/clientdetails/clientdetails.scss setzen

Answer 1

ich eine Fiddle gemacht habe (https://fiddle.sencha.com/#fiddle/1cd6) auf der Grundlage Ihrer Schnipsel das zeigt, wie Anpassen der Zeilenhöhe basierend auf der CSS-Klasse, die über die Methode getRowClass hinzugefügt wurde.

Die CSS ist sehr einfach:

.custom-grid .minor { 
    background: red; 
    height: 50px; 
} 

.custom-grid .adult { 
    background: blue; 
}