extjs 6.2.0网格列按标题设置宽度(标题)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了extjs 6.2.0网格列按标题设置宽度(标题)相关的知识,希望对你有一定的参考价值。

如何在extjs 6.2.0中按标题(标题)设置列宽?

我想自动设置列标题内容的宽度

答案

列的宽度必须为null:

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

如您所见,我创建了一个函数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;
    }
});

以上是关于extjs 6.2.0网格列按标题设置宽度(标题)的主要内容,如果未能解决你的问题,请参考以下文章

ExtJs 同一页面上的两个或多个网格

ExtJS GridPanel 数据工具提示

ExtJS Gridpanel 列宽 + forcefit

ExtJS 4.1 如何更改网格面板标题高度

Ext JS 网格面板:如何在鼠标悬停时显示内容

如何在设置记录数据时屏蔽 Extjs 网格并在设置后取消屏蔽?