2012-05-22 49 views
3

我在我的項目中使用Ext.grid.Panel,但我認爲默認的行高度太大,我不能修改行高度,所以整個網格讓我感覺不舒服。如何在Extjs 4中設置網格行高?

但是,我發現Extjs-4 doc中的panel-grid示例非常好。其中行高調整爲適合單詞高度。因此整個網格非常緊湊。

所以我不知道如何設置網格行高?

回答

4

您可以更改行高的一種方法是使用css。每一行使用填充與高度的內容一起,所以如果你是改變填充在這個類這將使該行高/低:

.x-grid-cell-inner { 
    overflow: hidden; 
    padding: 3px 6px; 
    white-space: nowrap; 
} 

此外,您還可以在這裏看看:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.view.Table-method-getRowClass

+0

謝謝Zero Cool,我已經嘗試添加如上所述的.x-grid-cell-inner的樣式表,但網格行高仍然沒有改變,我不知道爲什麼... –

+0

哦,我發現問題,它現在可以完美工作!謝謝Zero Cool:D –

+0

不客氣,很高興它的工作。乾杯。 –

1

JavaScript代碼

viewConfig : { 
    forceFit : true, 
    getRowClass : function(record, index) { 
     if (index % 2 == 0) 
      return "red"; 
     else 
      return "green"; 
    } 

},

CSS Code

.red .x-grid-cell { 
    background-color: #FFFFDD; 
    height: 30px; 
} 
+0

你能提供一些關於它如何工作的意見嗎? – rayryeng