Как удалить границу заголовка в панели сетки Ext JS?

Question

У меня есть панель сетки, и я хочу полностью скрыть заголовок. Я использую параметр конфигурации hideHeaders: true, но он все еще оставляет слабую синюю границу 1px, где заголовок был. Как я могу не иметь этот 1px синий заголовок?

Это JSFiddle, показывая проблему.

против

Я знаю, что это похоже на тонкое различие, но в моем заявлении, что граница выглядит очень плохо. Я думал, что это будет полностью удалить заголовок, но это не так:

Ext.create('Ext.grid.Panel', { 
    store: store, 
    hideHeaders: true 
}); 

Answer 1

Я использую этот sass блок стиль мои заголовки столбцов:

.x-grid-header-ct{ 
    border-bottom: 1px solid #ecedee; 
    padding-left: 15px; 
    .x-column-header { 
     border: none; 
     background: none; 
     .x-column-header-inner{ 
      padding: 10px 15px 15px 7px; 
      &:before{ 
       border: none; 
      } 
      .x-column-header-text{ 
       color: #222; 
       white-space: normal; 
       font-size: 18px; 
      } 
     } 
     .x-column-header-over{ 
      background: none; 
      .x-column-header-trigger{ 
       display: none; 
       background-color: white; 
      } 
     } 
     .x-column-header-inner-empty{ 
      background: none; 
     } 
    } 
}