PDA

View Full Version : Grid width does not resize with panel resize



paradxum
9 Jul 2010, 8:53 AM
Ok, I've been pulling my hair out on this one.

When resizing the contained window, everything's width resizes except for the grid... HELP...


var win1 = new Ext.Window({
title: 'win1',
width: 300,
items: new Ext.FormPanel({
title: 'panel1',
autoHeight: true,
defaultType: 'panel',
items: [{
collapsible : true,
autoHeight : true,
title : 'tbl-panel',
layout : 'table',
layoutConfig : { columns: 1, tableAttrs:{ style: { width: '100%' } } },

items : [ new Ext.grid.GridPanel({
store: new Ext.data.ArrayStore({
fields:[ {name: 'id'} ],
data: [ [ '1' ],['2'],['3'] ]
}),

columns: [
{id: 'id', header: 'Comment', dataIndex: 'id' }
],
autoExpandColumn: 'id',
autoHeight: true,
hideHeaders: true,
viewConfig:{
scrollOffset: 0,
emptyText: 'No Comments Registered'
}
}),{
xtype: 'textarea',
height: 100,
width: '100%',
emptyText: "To add a comment type here."
}, new Ext.Toolbar({
items: [
'->',
{
xtype: 'checkbox',
name: 'new_comment_sensitive'
},{
xtype: 'tbtext',
text: 'Comment Contains Sensitive Information'
}]
})]

}]

})
});

win1.show();
};

Condor
9 Jul 2010, 11:19 PM
TableLayout doesn't size it's children. Instead use:

layout: {type: 'vbox', align: 'stretch'}
(and remove all those width:'100%' - they aren't valid anyway)

paradxum
11 Jul 2010, 3:25 AM
First off, Thank you Condor for your reply. I really appreciate you taking the time to look it over and comment.

So I found the solution and want to post it for completeness (In case anyone else stumbles upon this thread.)

I tried out the vbox layout. There was one main issue though. When using vbox, autoHeight seems to not work (The panel will not resize to the contents.) So I ended up with a 0 height panel. When I set the height of the panel (and the flex property) it works except now I'm stuck with a static height panel. This does not work well for a dynamic grid that will be adding members.

The solution ended up being the anchor layout:

layout : {type: 'anchor', defaultAnchor: '100%' },Now I know you said that the 100% width's aren't valid. For a vbox layout you are correct, however for anchor and table layouts they are.

I also found it interesting that the textarea needed a separate width: 100% otherwise it would not size properly. It seems as if that component does not allow the parent panel to resize it.

so a complete solution is:

itstime = function(){
var win1 = new Ext.Window({
title: 'win1',
width: 300,
items: new Ext.FormPanel({
title: 'panel1',
autoHeight: true,
defaultType: 'panel',
items: [{
collapsible : true,
autoHeight : true,
title : 'tbl-panel',
layout : {type: 'anchor', defaultAnchor: '100%' },
items : [ new Ext.grid.GridPanel({
store: new Ext.data.ArrayStore({
fields:[ {name: 'id'} ],
data: [ [ '1' ],['2'],['3'] ]
}),

columns: [
{id: 'id', header: 'Comment', dataIndex: 'id' }
],
autoExpandColumn: 'id',
autoHeight: true,
hideHeaders: true,
viewConfig:{
scrollOffset: 0,
emptyText: 'No Comments Registered'
}
}),{
xtype: 'textarea',
height: 100,
width: '100%',
emptyText: "To add a comment type here."
}, new Ext.Toolbar({
items: [
'->',
{
xtype: 'checkbox',
name: 'new_comment_sensitive'
},{
xtype: 'tbtext',
text: 'Comment Contains Sensitive Information'
}]
})]

}]

})
});

win1.show();
};