PDA

View Full Version : How to set Ext.grid.ColumnModel width with %



alexaung
2 Nov 2010, 3:27 AM
I have Navigation Panel and Center Panel.

In Center Panel, I have grid. I have set all the column width. But when user collapsed navigation panel, then my Center Panel is resize as well as grid. The problem is that my grid columns are not reszie. Is the a way to config width with percentage.


var personnelColModel = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{ id: 'ServiceId', header: "Service Id", hidden: true, hideable: false, locked: true, dataIndex: 'ServiceId' },
{ id: 'BusinessUnit', header: "Vessel", width: 120, sortable: true, dataIndex: 'BusinessUnit' },
{ id: 'Employer', header: "Employer", width: 200, sortable: true, dataIndex: 'Employer' },
{ id: 'OnboardCategory', header: "Category", width: 100, sortable: true, dataIndex: 'OnboardCategory' },
{ id: 'IdString', header: "Staff ID", width: 100, sortable: true, dataIndex: 'IdString' },
{ id: 'FullName', header: "Name", width: 150, sortable: true, dataIndex: 'FullName' },
{ id: 'Position', header: "Position", width: 150, sortable: true, dataIndex: 'Position' },
{ id: 'Status', header: "Status", width: 100, sortable: true, dataIndex: 'Status' }
]);

Thanks,
Alex

Animal
2 Nov 2010, 3:47 AM
A plugin could do it. There might be one in the UX folder.

If not, you could write one. Get it to hook into the GridPanel's resize event, and iterate through the columns in the column model interrogating a new column config like columnWidth. Calculate the new width according to the GridPanel's total width, and set the width to the calculated value.

Make sure you suspend events on the ColumnModel before this operation, and manually refresh the GridView afterwards.

It will be useful to you and a great learning exercise to do this.

Condor
2 Nov 2010, 4:00 AM
What?

No need to program anything for that. You just need to configure the grid with:

viewConfig: {
forceFit: true
}

darthwes
2 Nov 2010, 12:53 PM
Animal's right, it's fun and you learn so much more about EXT!

alexaung
3 Nov 2010, 3:15 AM
Thanks Condor. It is exactly what i need but unfortunately i just saw your post after I over autoSizeColumn event like what Animal said. Anyway It is fun and lean more about Extjs.