Search code examples
cssextjsfiltergridextjs4

ExtJS 4.2 How to set grid filter height when header text is wrapped?

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?

Solution

  • 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...
            }
        ]
    }
]