extjs6調整網格行高

我想改變我的extjs網格中的行高度。試圖理解不同的方法來完成這個閱讀extjs6文檔中的主題指南。從我所瞭解的最常見的方式來做到這一點是創建一個CLS :. 我試圖用小提琴的例子，但似乎沒有做任何事情。extjs6調整網格行高

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

}）;

下面

是我的CSS我想使用

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

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

---區以下，似乎現在的工作----

這似乎在搗鼓工作，但我不知道在哪裏把CSS在我的文件結構

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

包含網格位於應用程序/視圖/ clientdetails/clientdetails.js 所以我嘗試的面板根據你的代碼片段把CSS代碼中應用程序/包/地方/我 - 經典THEME2 /上海社會科學院/ src目錄/查看/ clientdetails/clientdetails.scss

來源

2016-06-21 solarissf

我做了一個小提琴（https://fiddle.sencha.com/#fiddle/1cd6），它展示瞭如何根據通過getRowClass方法添加的CSS類自定義行高度。

的CSS是非常簡單的：

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

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

來源

2016-06-21 14:31:29 Stuart

對不起，我的例子是不完全清楚。我從其他地方複製它。我想平等地影響所有的行。這就是說，我看着你的小提琴，並改變了身高的數字......它可以變大，但似乎有一個最小的尺寸......就像我不能讓它變得非常小。是這樣嗎？ – solarissf

我想我在你的小提琴中使用.custom-grid .x-grid-row { background：red; line-height：1px; } – solarissf

最後一個問題，現在我試圖把它放在我的應用程序中，而且這個改變沒有被反映出來。我認爲，因爲我不明白在哪裏實際放置自定義CSS。你能告訴我在我的文件層次結構中它應該去的地方嗎？我編輯後顯示我的路徑 – solarissf

extjs6調整網格行高

回答

相關問題