PDA

View Full Version : Extjs 4.2.0 Grid autoSizeColumn override



vick_44
22 May 2018, 2:43 AM
This seems to be a bug in grid panel autoSizeColumn (Or may be I have missed something in my code) in IE browser,
when we use below block in a grid, the columns gets auto sized based on the width of the longest data available in that grid.



viewConfig: { listeners: {
refresh: function(dataview) {
Ext.each(dataview.panel.columns, function(column) {
column.autoSize();
})
}
}
}

Although this does what it is supposed to there is one issue related to width the autoSize sets to the column. Shown below is the result in IE browser where the width is set exactly = width of the data. But this results in showing "..." at the end of column border on the right as shown here. Usually when we set width for a column we provide width of the data +5 to keep a buffer between the last character of data to the column right border.

57531

My approach is to override the function which calculates the new width for the column when we call column.autoSize() function and add some additional width to the one calculated in that function. (Please let me know if there is a better approach than writing an override)

My analysis so far is as below:

Ext.grid.column.Column has autoSize() function. In this function it calls this.getOwnerHeaderCt().autoSizeColumn(this);

From this point on I do not know which class this autoSizeColumn() function reside in and how to write override for that.

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2h3a
grid : Panel1.js which is under app/view/

Can anybody point me in the right direction? any help is much appreciated.

vick_44
22 May 2018, 3:35 AM
Figured it!
> Ext.grid.column.Column autoSize() calls this.getOwnerHeaderCt().autoSizeColumn(this);
> Which is autoSizeColumn() of Ext.grid.header.Container , which calls autoSizeColumn() of Ext.view.Table
> So I had to override autoSizeColumn() function of Ext.view.Table


Below is the override code, just added +5 to the resulting width.



Ext.define('overrides.Table', {
override: 'Ext.view.Table',
autoSizeColumn: function(header) {
if (Ext.isNumber(header)) {
header = this.getGridColumns[header];
}
if (header) {
if (header.isGroupHeader) {
header.autoSize();
return;
}
delete header.flex;
header.setWidth(this.getMaxContentWidth(header)+5);
}
}
});