View Full Version : Grid width and percentages

11 Jan 2007, 9:12 PM
is it possible to have a grid that is 100% of it's container wide?
i have a nested layout and am adding a GridPanel to the southern part of it:

this.innerLayout.add( "south", new YAHOO.ext.GridPanel(myGrid, "Testing"), {fitToFrame:true} );

but the columns (and essentially the grid itslef) don't resize to fit / fill the width of it's container accordingly. i have not set any width's for the columns in the column model. is this possible?

12 Jan 2007, 9:54 AM
more code:

<div id="history" class="ylayout-inactive-content"></div>


this.innerLayout = new YAHOO.ext.BorderLayout("rightPane", {
center: {
autoScroll: true,
alwaysShowTabs: false,
title: "Some Title"
south: {
autoScroll: true,
tabPosition: 'top',
closeOnTab: true,
initialSize: 200,
minSize: 200,
alwaysShowTabs: false,
resizeTabs: true,
preferredTabWidth: 185,
title: "History"

one more

this.layout.add('center', new YAHOO.ext.NestedLayoutPanel(this.innerLayout), {fitTFrame:true});

that's basically it. the layout works fine, but as i said, the grid doesn't stretch to fit the width of the GridPanel apparently. and the only things i 'set' for the grid are the colModel and the dataModel. colModel is super basic, each column only setting 'header' and 'editor'....

any help? it may not even support it, i just don't know...

12 Jan 2007, 10:20 AM
Havent' tried, but this might help

12 Jan 2007, 3:34 PM
nice, thanx. it works if i do this:

grid.autoSize(); // this call is async
var view = grid.getView();
view.fitColumns.defer(50, view); // so we have to delay this call

on resize of the window. i thought that's what GridPanel was for, to automagically resize the grid accordingly?

12 Jan 2007, 4:11 PM
alright, finally figured a cleaner way to do it, using this is an example:

extend Grid and call it's view.fitColumnsToContainer() under certain circumstances:

MainGrid = function( container, config ){
MainGrid.superclass.constructor.call( this, container, config );
this.on('columnresize', this.onColumnResize, this, true);

YAHOO.extendX( MainGrid, YAHOO.ext.grid.Grid, {
render : function(){

autoSize : function(){

onColumnResize : function(){

pretty sweet. thanx for the help!