CODEWITHSUNDEEP
javascriptextjsextjs6.2
erlinve
erlinve

Reputation: 11

extjs 6.2.0 grid column set width by title (header)

How to set columns width by title (header) in extjs 6.2.0?

I want to set columns width by their header content automaticaly

Upvotes: 0

Views: 1383

Answers (2)

Moataz Sanad
Moataz Sanad

Reputation: 284

As you can see I have created a function getColumnWidth(), it will take the grid column text as parameter and then return the column width.

You can also adjust the numbers in the getColumnWidth() as your need.

Sencha Fiddle link https://fiddle.sencha.com/#view/editor&fiddle/2l1r

Ext.application({
    name : 'Fiddle',
    launch : function() {
        Ext.create('Ext.window.Window',{
		title:'Grid Auto Fit Column Width Based on Header Text',
		width:600,
		height:400,
		autoShow:true,
		layout:'fit',
		items:[{
		    xtype:'grid',
		    columns:[
		        {
		            text:'id',
		            width:this.getColumnWidth('id'),
		        },{
		            text:'Name',
		            width:this.getColumnWidth('Name'),
		        },{
	                text:'ThisWillFitItsData',
		            width:this.getColumnWidth('ThisWillFitItsData')
		        },{
	                text:'LetsTryMoreLongerText',
		            width:this.getColumnWidth('LetsTryMoreLongerText')
		        },{
		            text:'Fixed',
		            width:60
		        }
		        ]
		    }]
	});
    },
    getColumnWidth:function(text){
        let columnWidth = (text.length * 7) + 35  // giving 7 pixles for each letter in the text
        //Optional This part is used to set a maximum column width in case there is too many charachter in the text
        if(columnWidth>400){
            columnWidth = 400
        }
        return columnWidth;
    }
});

Upvotes: 0

erlinve
erlinve

Reputation: 11

The width of column must be null:

var c = Ext.create('Ext.grid.column.Column', { text: 'Nam12131231313e', dataIndex: 'name', width: null});

Upvotes: 1

Related Questions