1. #1
    Sencha User
    Join Date
    Feb 2008
    Location
    Illinois
    Posts
    142
    Vote Rating
    0
    carl23934 is on a distinguished road

      0  

    Default Browser scrollbars with viewport

    Browser scrollbars with viewport


    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?

  2. #2
    Sencha User
    Join Date
    Feb 2008
    Location
    Illinois
    Posts
    142
    Vote Rating
    0
    carl23934 is on a distinguished road

      0  

    Default


    http://extjs.com/deploy/ext-2.1/docs...onWindowResize

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

  3. #3
    Sencha User
    Join Date
    Feb 2008
    Location
    Illinois
    Posts
    142
    Vote Rating
    0
    carl23934 is on a distinguished road

      0  

    Default


    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!


    Code:
    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);
    });

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

Thread Participants: 1