ExtJS的。 如何將項目添加到網格列標題？ （以現代為主題）

Question

我將向網格列標題添加一些項目。

它適用於經典主題（使用Ext.grid.Panel）

https://fiddle.sencha.com/#view/editor&fiddle/2s7u

但它不適用於現代主題（使用Ext.grid.Grid）

https://fiddle.sencha.com/#view/editor&fiddle/2s7v

所有項目都通過.x-gridcolumn.x-leaf .x-gridcolumn-body-el類與“ display：none;”一起到達div。 CSS樣式。

謝謝

Answer 1

您可以在初始化或網格渲染事件時將組件添加到目標dom。

 listeners: {
    initialize: function (grid) {
       var columns = grid.getColumns();
       columns.forEach(function(record){
       var targetDom = record.el.dom;
       var newPanel = Ext.create('Ext.container.Container', {
         items: [{
           xtype: 'textfield'
         }],
         renderTo: targetDom
       });
      })
   }  
}

Answer 2

感謝法比奧·巴羅斯（Fabio Barros）

解決方法是

 - add cls property to grid
 - add css rule with 'display: inline'

.grid-header-items .x-gridcolumn.x-leaf .x-gridcolumn-body-el {
  display: inline;
}//show items
.grid-header-items .x-gridcolumn .x-header-el {
  display: none;
}//hide header
        {
            xtype: 'grid',
            cls: 'grid-header-items',
            items: [
            .....
            ]
        }