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,505
    Vote Rating
    52
    Animal has a spectacular aura about 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

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

      0  

    Default very good

    very good


    Thanks for sharing. I had reached the same point and could not get the resize event to fire when I needed. Your solution on the layout even works very well for me too. Thanks again.

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

      0  

    Default


    This is sort of working for me, but not quite. If I move a region handle, the grid doesn't resize. If I move it again, then the grid resizes, but to the position that it should have been after the first move. It's like it's always one step behind the actual width of the panel.

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

      0  

    Default


    Har. It works if I call view.autoSizeColumns() twice. The first call is always a step behind, as previously mentioned. The second call gets it right.

    Probably a better way than two calls, maybe a 100ms wait or something?

  10. #10
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    try
    Code:
    view.autoSizeColumns.defer(100);
    for a 100ms delay.