ExtJS 4.1如何更改網格面板標題高度

Question

我想更改Ext.grid.Panel標題高度。

網格面板標題的高度被強制設置爲28px。

1. 沒有青菜設置在面板上
2. 頭的配置並沒有爲我
3. 修改網格列高度的工作似乎配置< 28px時工作。 28px似乎是最小的。

這是我到目前爲止（和它的工作），但我不喜歡的解決方案。

Ext.define('Ext.grid.Panel', { 
    listeners: { 
     beforerender: function (cmp, eOpts) { 
      cmp.headerCt.setHeight(25); 
     } 
    } 
}); 

此外，列標題似乎也固定在28px。將標題的高度設置爲25不會將列標題設置爲25.您還需要在scss/css中重寫該標題。否則，您的列標題菜單將顯示28px高度。

.x-column-header 
{ 
    height: 25px; 
} 

此解決方案不起作用：如果您拖動列頭，更改列的索引位置，這將打破-.-

Recommedations？

Answer 1

要設置列標題的高度，必須在編譯後設置高度。同樣，列配置的高度值不起作用來設置高度< 28，但工作> 28.

我發現在編譯後修改高度正確設置高度並允許列可拖動（一切正常正如它應該）。

Ext.define('Ext.grid.Panel', { 
    listeners: { 
     beforerender: function (cmp, eOpts) { 
      cmp.columns[0].setHeight(25); 
     } 
    } 
}); 

我的解決方案無法使用這個，因爲我創建了一個動態網格。在網格的動態部分，我使用GRID.reconfigure（）; - 通過銷燬在beforerender狀態下創建的任何內容。

Ext.define('Ext.grid.Panel', { 
    listeners: { 
     reconfigure: function (cmp, eOpts) { 
      cmp.columns[0].setHeight(25); 
     } 
    } 
}); 

reconfigure功能在重新配置後觸發，所以這就是我如何解決動態網格重新配置問題。

Answer 2

您還可以使用青菜子風格爲GridPanel中，並設置「UI」配置：

添加ui:'custom-height-item'到你的配置

@include extjs-panel-ui(
    'custom-height-item', 
    $ui-header-line-height: 28px, 
    $ui-header-padding: 2px; 
    )