ExtJS 4.2 How to set grid filter height when heade

Question

I have a grid with many columns, each of them has a filter, and some of the columns has a long text in the header:

I added a css rule to wrap text in the header:

.x-column-header-inner .x-column-header-text { white-space: pre-wrap; }

In result I got filters with different height:

How to make the same height filters?

Answer 1

I've solved my issue by including search filters into fieldcontainers, and using vbox layout with pack at the end.

items: [
    {
        xtype: 'fieldcontainer',
        layout: {
                    type: 'vbox', pack: 'end'
                },
        width: '100%',
        items: [
            {
                xtype: 'triggerfield',
                ...other code...
            }
        ]
    }
]

Answer 2

I implemented the search filter with your hint. You can find it here. I didn't have your issue with long column labels. They just cut off using an ellipsis like it is the standard behavior in ExtJs.