Ширина столбца сетки extjs 6.2.0 устанавливается по заголовку (заголовку)

Как установить ширину столбцов по названию (заголовку) в extjs 6.2.0?

Я хочу автоматически установить ширину столбцов по содержимому их заголовка


javascript extjs extjs6.2
person erlinve    schedule 31.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Как видите, я создал функцию getColumnWidth(), она будет принимать текст столбца сетки в качестве параметра, а затем возвращать ширину столбца.

Вы также можете настроить числа в getColumnWidth() по своему усмотрению.

Ссылка на Sencha Fiddle 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;
    }
});

person Moataz Sanad    schedule 03.09.2018