PDA

View Full Version : [SOLVED] dynamic column width in grid



steffenk
4 Nov 2009, 3:15 AM
Hi,

i have 4 columns in a grid where i defined initial width for the columns with
10,10,60,20
which means percent (together 100%)

This works on initial load. The gridPanel has width of 98%, so it automatically resize when window is resized. But the columns stay with initial width, so the gridview doesn't fit into the gridPanel, which looks odd.

I tried different ways in resize event of gridPanel to rerender the cm, but doesn't help.

Is there a way for automatically resize the gridview?

thx.

Condor
4 Nov 2009, 4:24 AM
The grid is ok, your layout isn't.

The layout should resize the grid to fit the container. How is the grid container configured?

steffenk
4 Nov 2009, 4:45 AM
Hi Condor,

here is the code of the container:



var gridContainer = new Ext.grid.GridPanel ({
renderTo: Recycler.statics.renderTo,
width: '98%',
height: 600,
frame: true,
border: true,
defaults: {autoScroll: false},
plain: true,
id: 'delRecordId',
loadMask: true,
store: gridDs,
cm: new Ext.grid.ColumnModel([
sm,
expander,
{header: "UID", width: 10, sortable: true, dataIndex: 'uid'},
{header: "PID", width: 10, sortable: true, dataIndex: 'pid'},
{id:'record',header: "Records", width: 60, sortable: true, dataIndex: 'record', renderer: renderTopic},
{header: "Table", width: 20, sortable: true, dataIndex: 'tableTitle'}
]),

viewConfig: {
forceFit:true
},

sm: sm,
plugins: expander,
loadMask: true,
stripeRows: true,
collapsible: false,
animCollapse: false,
listeners: {
resize: function(obj) {
//TODO: find a way to resize columns to fit in view
}
},

bbar: [...snip...],

tbar: [...snip...]

});

i also tried with layout: 'fit' which doesn't changed anything.

Jaitsu
4 Nov 2009, 4:52 AM
try specifying:


viewConfig: {
forceFit: true
}

on your grid panel

steffenk
4 Nov 2009, 5:10 AM
Hi Jaitsu,

tried without success. Doesn't this looks odd?


view: new Ext.grid.GridView({
forceFit:true
}),
viewConfig: {
forceFit: true
},


btw - it works also without Ext.grid.GridView, so this may be deprecated.

Jaitsu
4 Nov 2009, 5:16 AM
yeah my bad, didn't see the view property... ignore my post :)

Condor
4 Nov 2009, 5:24 AM
Bad!!!

renderTo: Recycler.statics.renderTo,
width: '98%',

Do NOT render inside a layout!

Instead add() the grid to the container and call container.doLayout().

steffenk
4 Nov 2009, 6:07 AM
Hi Condor,

maybe i'm too bad: the gridPanel is the only container i have, so how add this from outside?
Recycler.statics.renderTo is only the id of the div.

Condor
4 Nov 2009, 7:04 AM
From your screenshot I see that you are trying to render the grid to some kind of panel (I see a toolbar).

Instead of rendering to this panel, you should be adding the grid to this panel.

steffenk
4 Nov 2009, 7:08 AM
no, i only have the gridPanel with tbar and bbar inside, nothing else. Look to the code above, that's the complete structure

Condor
4 Nov 2009, 7:41 AM
OK, so this is your entire Ext layout (no Ext.Viewport etc.)?

In that case you need my FitToParent plugin (http://www.extjs.com/forum/showthread.php?t=28318).

steffenk
4 Nov 2009, 7:51 AM
excellent, brilliant, fantastic, ... Just inserted your plugin and it works like a charm!

1000 thanks!