PDA

View Full Version : Browser scrollbars with viewport



carl23934
25 Sep 2008, 5:19 PM
NEVERMIND! I figured it out!

I have a viewport with 2 columns (east & west regions). Inside each column I have panels that are collapsible as well as grids that are vertically resizable.

The problem I am running into is if you resize the grids it can force the panels underneath it to go past the bottom of the browser window, but the browser scroll bars do not show up. So my content is effectively cut off. :(

Can I nest the viewport in something?

It took forever to get all the viewport's child panels to automatically resize properly if the browser is resized, so I don't want to re-write too much to get the browser's scrollbars to show up.

Before I chose to move to a viewport, I had the entire page wrapped in a panel. It was a trivial move to the viewport, but I needed the viewport because it allows me to handle browser resize events.

If there is an easy way to capture browser resize events with a simple panel I should be able to accomplish what I need.

So All In All:
1) Can I get brower scrollbars with a viewport (forum searching tells me no)
2) If I have all of my content in one big panel, how can I capture the browser resize events?

carl23934
25 Sep 2008, 5:23 PM
http://extjs.com/deploy/ext-2.1/docs/?class=Ext.EventManager&member=onWindowResize

Nevermind! After thinking about it more I found a way to re-phrase my searches!

carl23934
25 Sep 2008, 5:45 PM
Ok, I was able to get it all working using 99% of my code that was called on the viewport resize event.

if you ever need to dynamicaly resize a panel that takes up 100% of the browser viewport, you can simply use the onWindowResize function!



Ext.EventManager.onWindowResize(function(){
//w,h are the params sent to this function, but they are not needed in my case

//this is the panel that takes up 100% of screen, this call fixes just about all child components
bodyPanel.doLayout();

//get the new width. My main panel uses a column layout, so I need the width of one of the columns.
var newColWidth = Ext.get('bodyPanelCol1').getSize().width - 10;

//resize all of my nested grids
grid1.setSize(newColWidth,100);
grid2.setSize(newColWidth,100);
grid3.setSize(newColWidth,100);
});

Animal
25 Sep 2008, 11:26 PM
If you want the child items of the columns to fill the column width and resize automatically, give the column layout:'anchor', and configure the child items with anchor:'100%'

Ext's layout managers are designed to help with dynamic layouts so that you do not have to write code like this.

Read the API docs on all of them and read the source code of all the examples in your examples/layout and examples/layout-browser directories.