[Solved] Grid is not resized inside ContentPanel

[kenjliang]

Please help.

GXT: 2.1.1
GWT: 2.0.3
IE: 7.0.5730.13

    public void onModuleLoad()
    {
        List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
        columns.add(new ColumnConfig("name", "Name", 50));
        columns.add(new ColumnConfig("description", "Description", 100));
 
        Grid<ModelData> grid = new Grid<ModelData>(new ListStore<ModelData>(), new ColumnModel(columns));
        grid.setHeight("100%");
        grid.setBorders(true);
 
        ContentPanel cp = new ContentPanel();
        cp.setHeading("Heading");
        cp.setFrame(true);
        cp.setScrollMode(Scroll.AUTO);
        cp.addButton(new Button("Click me"));
        cp.add(grid);
 
        Viewport viewport = new Viewport();
        viewport.add(cp);
        viewport.setScrollMode(Scroll.AUTO);
 
        RootPanel.get().add(viewport);
    }

[sven]

You are not sizing anything correctly.

Give the viewport and your contentpanel a fitlayout.

[kenjliang]

Thank you sven for quick reply!

Actually what I am trying to do is to have two parts inside one container, the "search" panel and "result" panel. The grid is inside "result" panel.

I have two questions:

1. The grid resizing issue. Not able to resize if I have two panels inside one container. Please see the red comment in attached code.

2. The "search" panel contains dynaic fields, so its height is flexible. How can I make the "result" panel and grid fill out the rest of the "center" container?

public class Application implements EntryPoint
{
    public void onModuleLoad()
    {
        Viewport viewport = new Viewport();
        viewport.setLayout(new BorderLayout());
 
        createNorth(viewport);
        createWest(viewport);
        createCenter(viewport);
 
        RootPanel.get().add(viewport);
    }
 
    private void createNorth(Viewport viewport)
    {
        StringBuffer sb = new StringBuffer();
        sb.append("<div id='app-locale'></div>");
        sb.append("<div id='app-title'>My Application</div>");
        HtmlContainer northPanel = new HtmlContainer(sb.toString());
        northPanel.setStateful(false);
        northPanel.setId("app-header");
        northPanel.addStyleName("x-small-editor");
        BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 33);
        data.setMargins(new Margins());
        viewport.add(northPanel, data);
    }
 
    private void createWest(Viewport viewport)
    {
        BorderLayoutData data = new BorderLayoutData(LayoutRegion.WEST, 220, 150, 320);
        data.setMargins(new Margins(5, 5, 5, 5));
        data.setCollapsible(true);
        ContentPanel westPanel = new ContentPanel();
        viewport.add(westPanel, data);
    }
 
    private void createCenter(Viewport viewport)
    {
        ContentPanel centerPanel = new ContentPanel();
        centerPanel.setBorders(false);
        centerPanel.setHeaderVisible(false);
        centerPanel.setLayout(new FitLayout());
        centerPanel.add(createSearchPanel());
        BorderLayoutData data = new BorderLayoutData(LayoutRegion.CENTER);
        data.setMargins(new Margins(5, 5, 5, 0));
        viewport.add(centerPanel, data);
    }
 
    private TabPanel createSearchPanel()
    {
        TabPanel tabPanel = new TabPanel();
        tabPanel.setCloseContextMenu(true);
        tabPanel.setBorderStyle(false);
        tabPanel.setBodyBorder(false);
        tabPanel.setTabScroll(true);
        tabPanel.setAnimScroll(true);
 
        TabItem item = new TabItem();
        item.setText("Search Panel");
        item.setLayout(new FitLayout());
        tabPanel.add(item);
 
        FormPanel searchPanel = new FormPanel();
        searchPanel.setHeading("Search");
        TextField<String> field = new TextField<String>();
        field.setFieldLabel("Search Criteria");
        searchPanel.add(field);
        searchPanel.add(new Button("Search"));
 
        ContentPanel resultPanel = new ContentPanel();
        resultPanel.setHeading("Result");
        resultPanel.setFrame(true);
        resultPanel.setLayout(new FitLayout());
        resultPanel.setScrollMode(Scroll.AUTO);
        resultPanel.addButton(new Button("OK"));
        resultPanel.add(createGrid());
 
        LayoutContainer page = new LayoutContainer();
        // what layout should I use here?
        page.add(searchPanel);
        page.add(resultPanel);
 
        LayoutContainer pageContainer = new LayoutContainer(new FitLayout());
        pageContainer.setScrollMode(Scroll.AUTO);
        pageContainer.add(page);
 
        item.add(pageContainer);
 
        return tabPanel;
    }
 
    private Grid<ModelData> createGrid()
    {
        List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
        columns.add(new ColumnConfig("field1", "Field1", 50));
        columns.add(new ColumnConfig("field2", "Field2", 50));
        columns.add(new ColumnConfig("field3", "Field3", 50));
        columns.add(new ColumnConfig("field4", "Field4", 50));
        columns.add(new ColumnConfig("field5", "Field5", 50));
        Grid<ModelData> grid = new Grid<ModelData>(new ListStore<ModelData>(), new ColumnModel(columns));
        grid.setHeight("100%");
        grid.setBorders(true);
        grid.getView().setForceFit(true);
        return grid;
    }
}

[kenjliang]

Can anyone please help me on my simple questions? Thanks in advance.

[bogusky]

try this

//        LayoutContainer page = new LayoutContainer();
//        // what layout should I use here?
//        page.add(searchPanel);
//        page.add(resultPanel);
        LayoutContainer page = new LayoutContainer(new RowLayout(Orientation.VERTICAL));
        page.add(searchPanel, new RowData(1, -1));
        page.add(resultPanel, new RowData(1, 1));

 
//        LayoutContainer pageContainer = new LayoutContainer(new FitLayout());
//        pageContainer.setScrollMode(Scroll.AUTO);
//        pageContainer.add(page);
 
        item.add(page);

resultPanel is sizing grid, so you dont need "grid.setHeight("100%");".
Do you want scrollbars or not? Because container with fitlayout will never show scrollbars.

What does it mean "dynamic fields"? Dynamic count or size? Do you know this info before render?

[kenjliang]

Thank you bogusky! Your solution works, it fixs my two questions.