Layout/Grid problem

[marcinKozlowicz]

Hi,

I'm trying to create component (panel ) containg 2 panels:
- top panel ( on the top of the parent panel ) containg some fields ( textFields etc.)
- center/bottom panel containg grid with data

I'm trying to make grid fit entire provided space but after some experimenting with fitlayouts/flowlayouts and size controlling methods i haven't achived what i wanted:/

When i placed grid component insinde ContentPanel with FitLayout and SetHeight("100%") i got almost desired effect.. almost, because grid is still too height and pagetoolbar is unreachable.

What's more in my example one of grid's column is invisible - first column expands too much:/

Thanks in adavance for any help

package example.example.client;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.PagingToolBar;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * * Entry point classes define <code>onModuleLoad()</code>.
 */
public class App implements EntryPoint {
    class Form extends LayoutContainer {
        @Override
        protected void onRender(Element parent, int index) {
            super.onRender(parent, index);

            setLayout(new FitLayout());

            final FormPanel topPanel = new FormPanel();
            topPanel.setCollapsible(true);
            topPanel.setHeading("topPanel");

            TextField<String> field1 = new TextField<String>();
            field1.setFieldLabel("field1");
            TextField<String> field2 = new TextField<String>();
            field2.setFieldLabel("field2");
            TextField<String> field3 = new TextField<String>();
            field3.setFieldLabel("field3");

            topPanel.add(field1);
            topPanel.add(field2);
            topPanel.add(field3);
            
            RpcProxy proxy = new RpcProxy() {
                @Override
                public void load(Object loadConfig, AsyncCallback callback) {
                    //emtpy
                }
            };

            BasePagingLoader loader = new BasePagingLoader(proxy);
            ListStore<BaseModel> store = new ListStore<BaseModel>(loader);
            PagingToolBar toolBar = new PagingToolBar(50);
            toolBar.bind(loader);
            
            List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
            columns.add(new ColumnConfig("p1", "p1", 150));
            columns.add(new ColumnConfig("p2", "p2", 150));
            columns.add(new ColumnConfig("p3", "p3", 150));
            columns.add(new ColumnConfig("p4", "p4", 150));
            
            final Grid<BaseModel> grid = new Grid<BaseModel>(store,new ColumnModel(columns));
            grid.setAutoExpandColumn("p1");
            grid.setAutoExpandMax(1000);
            
        
            final ContentPanel bottomPanel = new ContentPanel();
            bottomPanel.setHeading("bottom");
            bottomPanel.add(grid);
            bottomPanel.setLayout(new FitLayout());
            bottomPanel.setBottomComponent(toolBar);
            bottomPanel.setHeight("100%");
            bottomPanel.setScrollMode(Scroll.AUTO);
            bottomPanel.setCollapsible(true);
            
            final ContentPanel mainPanel = new ContentPanel();
            mainPanel.setLayout(new FlowLayout());
            mainPanel.setHeading("mainPanel");
            mainPanel.add(topPanel);
            mainPanel.add(bottomPanel);

            add(mainPanel);
        }
    }
    
    public void onModuleLoad() {
        Viewport v = new Viewport();
        v.setLayout(new FitLayout());
        v.add(new Form());
        v.setMonitorWindowResize(true);
        RootPanel.get().add(v);
    }

}

[villemustonen]

This seems to be related to the problem I'm having with Grid and BorderLayout

It used to work with the container's layout being set to FitLayout when using a Table but not when using a Grid.

I have been able to get the scrollbars to either scroll to about 5000 pixels, when the actual width of the Grid is around 500 pixels, or I don't have the scrollbars at all.

[reliagility]

I'm having the same issues. It seems that grids and tables cannot have scrollbars, unless grid/table is of a fixed size. setAutoWidth(true) and setAutoHeight(true) cause the scrollbars to not appear.
Fixed sized grids/tables are not very useful.

[gslender]

I suppose I don't really understand how you can have an autosizing widget that somehow determines it needs a scroll bar? what for, if it can resize why wouldn't it just get bigger all the time instead?

Perhaps what you want is a parent container that is sized (for some reason) that grows with the window (browser). If you do that, set the layout of that parent container to be filllayout and then add a normal grid. It will then show scroll bars if the parent container is not big enough to show the data/rows.

cheers,
grant

[villemustonen]

What helped for me was

Grid grid = new Grid<Model>(store, columnModel);
center = new ContentPanel();
center.setLayout(new FitLayout());

However, the scrollbars don't appear unless the table has data. To me, this still seems wrong.

[jmhwhite2001]

First, I have a tab panel and the first tab will have a grid inside of it. Plain and simple, but not so.

Here's the hierarchy:

TabPanel (Width: 980, Height: 400, AutoWidth/Height: True)
TabItem (FitLayout)
ContentPanel (FitLayout)
Grid

What I'd expect to happen is the grid would fill the full width and height of the content panel which is embedded in a tab item which is embedded inside a tab panel. The tab panel already has width and height. I expect the size to be automatically retrieved by the parent components, but this doesn't work.

I don't want to set a size on a grid b/c I'd have to assume for scrollbars and pagination, which I shouldn't have to be concerned with.

I've been working this issue for 2 days now and constantly changing the layouts and nothing seems to work.

At this point, the height of the grid is probably 50 pixels. It will stay that way unless I specifically set the height to be like 380. If FitLayout is suppose to make the component take all of the empty space, i'd assume it'd work for height as well.

AutoWidth/Height is set to true on the tabPanel, tabItem and content panel that holds the grid. <- I just did that now just to check and still the same issue.

[n0thing]

I'm experiencing the same issue. How frustrating! I want my grid to take up all available horizontal space, but instead it just extends far off the screen WITHOUT even showing a scrollbar. The 'num records shown' label on my PageToolBar can't be seen. This is garbage. Explicitly setting the grid's width fixes the problem, but then it looks like crap on window resize.

gslender: This is a trivial thing to understand. Auto-sizing should always be to 100% of available space (which is ultimately the window size as you climb the DOM tree).

Anyway, how about using a window resize listener to dynamically adjust the 'static' size of the grid?

Edit: Well I just tried it. It sure rubs me the wrong way, but at least it works. There is one thing to watch out for. If your grid is non-empty during the resize, the contents will not resize with the grid. Therefore, you'll have to refresh your grid as part of your WindowResizeListener.

[gslender]

Guys (there is a few of you on this thread) - you need to appreciate a few things...

1) that not all layouts size their children.

2) Grid requires that it be sized, or that its layout sizes it.

3) Sizing of children only occurs down (ie if the window width is adjusted it will resize its children only if the right layout is used)

I'm sure intially the layout's all seem confusing, but once you get used to them, you can do most things.

So, who is still unable to do what they need?

[n0thing]

gslender, I'm pretty sure we all understand what you're saying. The problem here has been well defined. We want a grid that automatically takes the available space without going off screen (e.g. causing a scrollbar to appear). Do you know how to do it?

[n0thing]

I can find no possible way for ExtGWT's grid to scale in any sensible manner. Even the example on the website fails miserably. To see this, simply use firefox and reduce the size of your window so that part of the grid cannot be seen. Where's the scrollbar? Now imagine a real application with a grid that is supposed to fill the majority of the screen. All it takes is a user with a low resolution for the grid to be clipped and rendered worthless.

Does ANYONE know how to get around this problem?