Hybrid View

  1. #1
    Ext User
    Join Date
    Apr 2007
    Posts
    18
    Vote Rating
    0
    tarsolya is on a distinguished road

      0  

    Default [solved] GridPanel / Grid doesn't resize columns on window resize

    [solved] GridPanel / Grid doesn't resize columns on window resize


    Hi guys,

    I have tried everything, still no luck. Browsed this forums but couldn't find an exact solution to this problem.

    I have a GridPanel added to a NestedLayoutPanel in my main BorderLayout. That GridPanel has a Grid for browsing some products. Now, my problem is, when I resize the window, the columns doesn't get adjusted to the new Viewport width and a scrollbar pops up at the bottom of the grid. I have autoSizeColumns: true and monitorWindowResize: true, still no luck.





    Basically, I want that scrollbar go away and my columns automatically resizing to the new region width after a window size change.

    Thanks,
    Andr

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

      0  

    Default


    You'll have to hook a handler to the Region's "resized" event, and resize the GridPanel, and autoSize the Grid.

  3. #3
    Ext User
    Join Date
    Apr 2007
    Posts
    18
    Vote Rating
    0
    tarsolya is on a distinguished road

      0  

    Default


    Thanks a lot, Animal. I'm gonna figure out, how to do that propely.

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    218
    Vote Rating
    0
    humpdi is on a distinguished road

      0  

    Default


    hey!

    would be nice if you let us know if you have found a solution!

    thanks

  5. #5
    Ext User
    Join Date
    Apr 2007
    Posts
    18
    Vote Rating
    0
    tarsolya is on a distinguished road

      0  

    Default


    Ok, I hit a wall.

    I've hooked up on region's resized, but unfortunately that's only fires when a user using the in-layout split bars to resize a region (I guess).

    I figured, that I need to listen on layout's 'layout', I did it with a Grid.autoSize(), but it didn't do anything.

    I have a nested layout and in the nestedlayoutpanel, I have 2 regions, center / south. The problem is, that not the regions nor the panels in the region fire their respective resize / resized event, when a layout event is fired.

    My questions are:

    1.) Does the regions' and panel's events only fire when the user resized with their splitbars?
    2.) If I can use the layout event on the inner layout of my nested, how do I resize the GridPanel in the center region automatically or does it resizes by itself (I guess it is)?
    3.) My Grid resized when the layout changes. However, the columns are not. Can I somehow auto resize the columns based on the Grid's or GridPanel's new dimensions (auto size columns is turned on)?

  6. #6
    Ext User
    Join Date
    Apr 2007
    Posts
    18
    Vote Rating
    0
    tarsolya is on a distinguished road

      0  

    Default


    Finally, I've done it after some source digging.

    Using the 'layout' event, I've attached a callback what uses the GridView autoSizeColumns().

    Like this
    Code:
    // Attaching the even handler
    innerLayout.on('layout', this.fitColumns);
    And the callback:
    Code:
    // pg: the Grid object
    fitColumns: function() {
        pg.getView().autoSizeColumns();
    }
    So easy

    Cheers,
    Andr