extjs6グリッドの行の高さを調整する

Question

私のextjsグリッドの行の高さを変更しようとしています。 extjs6ドキュメントのテーマガイドを読んでこれを達成するさまざまな方法を理解しようとしています。 これを行う最も一般的な方法は、cls：を作成することです。 私はフィドルの例を使ってみましたが、何もしないようです。

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'; 
     } 
    } 
});    

}）;

以下

は、エリアの下---私は

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

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

を使用しようとしています私のCSSで今動作しているようです----

これはフィドルに動作しているようですが、私はどこに知りません私のファイル構造でCSSを入れ

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

ので、私が試した アプリ/ビュー/ clientdetails/clientdetails.jsに位置しているグリッドが含まれているパネル アプリ/パッケージ/ローカル/私のクラシック・テーマ2/SASS/srcに/ビュー/ clientdetails/clientdetails.scss

Answer 1

にCSSコードを置くために、私は方法を示しているスニペットをもとにフィドル（https://fiddle.sencha.com/#fiddle/1cd6）を作りましたgetRowClassメソッドで追加されたCSSクラスに基づいて行の高さをカスタマイズします。

CSSは非常に簡単です：

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

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