For my application, I want to be able to define custom HeaderContainers for grids, such as below:

Code:
Ext.define 'Quartermaster.data_types.asset.HeaderContainer',
    extend: 'Ext.grid.HeaderContainer'
    alias: 'Quartermaster.AssetHeaderContainer'
    
    border: no
    itemId: 'asset-headercontainer'
    
    items: [
        text     : 'Name' 
        width    : 75 
        sortable : yes  
        dataIndex: 'name'
    ,
        html: '<img src="/icons/attach.png" />'
        width: 30
        sortable: yes  
        dataIndex: '_attachments'
        renderer: (value, style, record, row, column, store) ->
            if value then return '<img src="/icons/attach.png" />' else return ''
    ,
        text     : 'Delegate' 
        width    : 75 
        sortable : yes  
        dataIndex: 'delegate'
    ]
If I then use this in my GridPanel config for headers, it creates this but nested within another HeaderContainer:

Code:
Ext.define 'Quartermaster.components.dataview.GridPanel',
    extend: 'Ext.grid.GridPanel'
    requires: ['Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.toolbar.PagingToolbar', 'Ext.ModelMgr']
    alias: 'Quartermaster.DataViewGridPanel'
    
    initComponent: ->
        Ext.apply @,
            store: Ext.getStore "Quartermaster.stores.#{@scope.config.type}_store"
            dockedItems: [@createPagingToolbar()]
            columnLines: yes
            headers: Ext.create 'Quartermaster.AssetHeaderContainer'
            .... Further code ....
Screenshot of Illumination: