How To: Auto Resize GridPanel Column Width + Read all Column Values in a Grid-Ext JS4

[newbie.scott]

How To: Auto Resize GridPanel Column Width + Read all Column Values in a Grid in Ext JS4

Hi All,

I am newbie, Its only been a week since i started learning ExtJS, so please accept my dump questions.

I have been thorugh the tutorials, forum discussions, source code, yet I
haven't found solution I am looking for, or i might have missed, so any
help would be great.


Problem 1: Is there anyway I can automatically set gridpanel column width,
based on retruned column data values (column width = max data value
string length)

Problem 2: To achive above, I need to know how i can get values of
particular grid column? Once i know the logic, should implement it as column
renderer function? Would column renderer function is called every time, a data
record is read (then its overkill)?, in that case is there any other function I can override?


I understand that this question been asked many times in the
forum, but most of the solutions ( Grid Column Width Calculator,
autoResizeColumns,etc) i found are for previous versions, am using EXTJS4 version


Thanks in advance
Newbie Scott

[skirtle]

Not dumb questions at all, quite tricky stuff actually. I've had a go, not entirely happy with it but thought I'd share anyway. I've got to wonder how you find yourself needing to do something this advanced in your first week of ExtJS?


var store = new Ext.data.Store({
autoLoad: true,
fields: ['name', 'age'],
proxy: {
type: 'ajax',
url: 'data/store.json'
}
});

var grid = new Ext.grid.Panel({
columns: getColumns(),
height: 300,
renderTo: Ext.getBody(),
store: store,
width: 300
});

store.on('load', function(st) {
// TODO: Can we guarantee this cell exists? Probably not
var cellEl = grid.getEl().down('.x-grid-cell-inner');

var metrics = new Ext.util.TextMetrics(cellEl);
var max = 0;

st.each(function(record) {
max = Math.max(max, metrics.getWidth(record.get('name')));
});

// Would be easier to use setWidth on the column but it doesn't seem to work.
// Offset by 10 for padding, etc. Adjust as required
grid.reconfigure(null, getColumns(max + 10));
});

function getColumns(width) {
return [
{dataIndex: 'name', header: 'Name', width: width},
{dataIndex: 'age', header: 'Age'}
];
}

[skirtle]

I tidied this up into a plugin:

http://www.sencha.com/forum/showthread.php?144000

[webfriend13]

Not dumb questions at all, quite tricky stuff actually. I've had a go, not entirely happy with it but thought I'd share anyway. I've got to wonder how you find yourself needing to do something this advanced in your first week of ExtJS?


var store = new Ext.data.Store({
autoLoad: true,
fields: ['name', 'age'],
proxy: {
type: 'ajax',
url: 'data/store.json'
}
});

var grid = new Ext.grid.Panel({
columns: getColumns(),
height: 300,
renderTo: Ext.getBody(),
store: store,
width: 300
});

store.on('load', function(st) {
// TODO: Can we guarantee this cell exists? Probably not
var cellEl = grid.getEl().down('.x-grid-cell-inner');

var metrics = new Ext.util.TextMetrics(cellEl);
var max = 0;

st.each(function(record) {
max = Math.max(max, metrics.getWidth(record.get('name')));
});

// Would be easier to use setWidth on the column but it doesn't seem to work.
// Offset by 10 for padding, etc. Adjust as required
grid.reconfigure(null, getColumns(max + 10));
});

function getColumns(width) {
return [
{dataIndex: 'name', header: 'Name', width: width},
{dataIndex: 'age', header: 'Age'}
];
}

Can you please explain what you are doing with this code. I ran into same issue and I am not able to set the width of the column. I am using ExtJs 4.1

Thank you