ExtJS 6-- Add textfield control into dynamic grid column header

Question

I am trying to add a textfield (or combobox) into the column header of dynamic grid.

There are suggestions for using "items" property to resolve this problem like in example below (line 81 in live example ):

   ...
        text: 'Email',
        flex: 1,
        menuDisabled: true,
        sortable: false,
        dataIndex: 'email',
        items: [{
            xtype: 'textfield',
            labelWidth: 40,
            flex: 1,
            fieldLabel: 'Email'
        }]
   ...

And it basically works but, there are several issues with layout which I cannot resolve myself:

textfield control appears under the column title (expect horizontal items alignment);
height of column header is to big (must be normal);

Here is a picture what I want to get.

Also, there is a live example in the fiddle with mentioned issues.

Are there any ideas how to fix this?

aallord aallord · Accepted Answer · 2019-10-25T21:54:41

You were just about there, here are the code changes I made.

function getColumnConfigs() {
return [{
    text: 'Name',
    dataIndex: 'name',
    flex: 1
}, {
    text: '',
    flex: 1,
    menuDisabled: true,
    sortable: false,
    dataIndex: 'email',
    items: [{
        xtype: 'combobox',
        store: ages,
        valueField: 'age',
        displayField: 'age',
        labelWidth: 40,
        padding: '0 0 0 10',
        flex: 1,
        fieldLabel: 'Age'
    }]
}]

The code removes your text attribute so it doesn't show the column header. Padding was added to the combobox to move the label right. I added the combobox rather than a textfield.

And a fiddle.

ExtJS 6-- Add textfield control into dynamic grid column header

1 Answers