CODEWITHSUNDEEP
extjs
stackato
stackato

Reputation: 1145

ExtJS 6 -- autofit grid column header text

Is there a way I can set the columns width to match the width of the column text? The user can resize the columns to see the content if needed, but I want the full header text to be showing at least, even if the column content isnt.

thanks

Upvotes: 2

Views: 4609

Answers (1)

pagep
pagep

Reputation: 3629

Yes it should be possible. You can call the method autoSize() on the column. You can combine it with the minWidth and maxWidth.

I have found this example on the Sencha forums for Ext 4.2 so it should be very similar for Ext 6.2:

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name',  dataIndex: 'name',  width: 150, autoSizeColumn: true },
        { text: 'Email', dataIndex: 'email', width: 150, autoSizeColumn: true, minWidth: 150 },
        { text: 'Phone', dataIndex: 'phone', width: 150 }
    ],
    viewConfig: {
        listeners: {
            refresh: function(dataview) {
                Ext.each(dataview.panel.columns, function(column) {
                    if (column.autoSizeColumn === true)
                        column.autoSize();
                })
            }
        }
    },
    width: 450,
    renderTo: Ext.getBody()
});

Upvotes: 5

Related Questions