PDA

View Full Version : ContentPanel & window resize / splitter resize



christocracy
23 Oct 2006, 10:28 AM
I've appended 3 grids inside a ContentPanel using yui-grids css

[grid1 (33%)] [grid2 (33%) ] [ grid3 (33%) ]

I need to listen for window-resize / splitter resize events and manually autoSize() the grids within the ContentPanel.

how I do?

jack.slocum
23 Oct 2006, 2:11 PM
What do you mean autoSize()? Are you talking about yui-ext grid component or yui grids.css? You mention grids.css but autoSize() is part of the grid component so I am confused. :)

christocracy
23 Oct 2006, 3:22 PM
>What do you mean autoSize()?

I mean ext.grid.Grid::autoSize()

>You mention grids.css but autoSize() is part of the grid component so I am confused.

I mean I've got 3 ext.grid.Grid inside some YAHOO grid.css (damn that's confusing).
I'm using the teh class yui-gb to space 3 grids onscreen at screen widths of 1/3, 1/3, 1/3.








[div id="grid1" class="GenreList box datagrid"]




[div id="grid2" class="ArtistList box datagrid"]




[div id="grid3" class="box datagrid AlbumList"]









var browser = new YAHOO.ext.ContentPanel('MusicBrowser');
this.innerLayout.add('north', browser);


I would prefer to put each grid into their own YAHOO.ext.GridPanel, but I need each grid to occupy 33% of the screen, so I put all 3 ext.grid.Grid into a ContentPanel.

when the browser or a split-bar gets resized, I need to be notified so I can manually call autoSize() on each ext.grid.Grid.

not sure if made that any more clear or just made it muddier.

jack.slocum
23 Oct 2006, 7:11 PM
When the content panel is resized, the layout calls setSize(width, height) on the panel. GridPanel takes this and updates the container size and then calls autoSize(). You will want to just call autoSize().



var cp = new YAHOO.ext.ContentPanel(...);
cp.setSize = function(width, height){
grid1.autoSize();
grid2.autoSize();
grid3.autoSize();
}

christocracy
23 Oct 2006, 7:51 PM
>When the content panel is resized, the layout calls setSize(width, height)

yup, discovered that.

>GridPanel takes this and updates the container size and then calls autoSize().

saw this too.



var cp = new YAHOO.ext.ContentPanel(...);
cp.setSize = function(width, height){
grid1.autoSize();
grid2.autoSize();
grid3.autoSize();


beautiful. that hadn't occured to me. exactly what I needed. I was thinking of extending ContentPanel or something.
merci beaucoup, monsieur Jacques.
a la prochain....