PDA

View Full Version : Grid width and percentages



jamaljohnson
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?

jamaljohnson
12 Jan 2007, 9:54 AM
more code:



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


and



this.innerLayout = new YAHOO.ext.BorderLayout("rightPane", {
center: {
autoScroll: true,
alwaysShowTabs: false,
title: "Some Title"
},
south: {
split:true,
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...

tryanDLS
12 Jan 2007, 10:20 AM
Havent' tried, but this might help
http://www.yui-ext.com/forum/viewtopic.php?p=5043

jamaljohnson
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?

jamaljohnson
12 Jan 2007, 4:11 PM
alright, finally figured a cleaner way to do it, using this is an example:
http://www.jackslocum.com/deploy/yui-ext/examples/layout/complex.html

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(){
MainGrid.superclass.render.call(this);
this.getView().fitColumnsToContainer();
},

autoSize : function(){
MainGrid.superclass.autoSize.call(this);
this.getView().fitColumnsToContainer();
},

onColumnResize : function(){
this.getView().fitColumnsToContainer();
}
});


pretty sweet. thanx for the help!